CODEWITHSUNDEEP
htmlcsstailwind-css
Amir Rahman
Amir Rahman

Reputation: 1119

absolute item inside grid not taking full height as need

in this code you can see a white box which is set to full height but its not taking full size only the highest box is taking full height is there any way to make it take full height for all white absolute boxes i am badly stuck any help is highly appreciable

i want all white boxes to keep full height so i can center the red circle but i dont know why this boxes are taking different height although i have specified hull height for each i have used tailwind to i dont know if its tailwind issue or css3 grid

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="grid grid-cols-3 gap-5">
  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 border-2 bg-white h-full right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>

  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 h-full border-2 bg-white right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>

  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 border-2 h-full bg-white right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 46

Answers (1)

Viira
Viira

Reputation: 3911

Just add .relative {height: 100%;}

.relative {height: 100%;}
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="grid grid-cols-3 gap-5">
  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 border-2 bg-white h-full right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>

  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 h-full border-2 bg-white right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>

  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 border-2 h-full bg-white right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions