2

I have three divs in a grid. the height automatically adjusts to the written content. however, if one div contains too much text, the other two are enlarged incorrectly. I have already tried h-max, h-full and everything else.

Actually, the div in the middle of one of these blocks should be enlarged so that it is always flush at the bottom.

for further information please refer to the picture

enter image description here

<div class="grid grid-cols-6 gap-4">
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">24 Hours challenge</h3>
      </div>
      <div class="bg-gray-50 px-4 py-5 text-center">
          <a class="text-md font-bold text-gray-500">Ask a stranger if they would like to hear a poem you made. Then improvise a poem if they say yes</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">06:12:53 left</a>
      </div>
  </div>
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">3 Days challenge</h3>
      </div>
      <div class="bg-gray-50 px-4 py-5 text-center">
          <a class="text-md font-bold text-gray-500">Act as if you know a stranger</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">30:07:00 left</a>
      </div>
  </div>
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">Weekly challenge</h3>
      </div>
      <div class="bg-gray-50 px-4 py-5 text-center">
          <a class="text-md font-bold text-gray-500">Sing a song in public</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">54:06:43 left</a>
      </div>
  </div>
</div>
Gregoire Ducharme
  • 1,095
  • 12
  • 24
Jakob Becker
  • 33
  • 1
  • 6
  • Little bit confused with desired result - they should have different height depends on content or same? See [here](https://play.tailwindcss.com/iCjoFuSzAn), which one is correct or none of them? – Ihar Aliakseyenka Aug 04 '22 at 10:59

1 Answers1

1

flex-grow is the answer thx to Ihar

<div class="bg-gray-50 px-4 py-5 text-center flex-grow">
Gregoire Ducharme
  • 1,095
  • 12
  • 24
Jakob Becker
  • 33
  • 1
  • 6