Tailwind child element with 'h-full' is oversized like parent with 'h-screen'

Question

I have page with Tailwind. Code is here:

<div id="parent" class="flex h-screen flex-col bg-red-600">
  <div id="child1" class="flex h-20 items-center justify-center bg-green-600"><h3>Header</h3></div>
  <div id="child2" class="flex h-full flex-row">
    <div id="child22" class="scroll-y-auto h-full w-full overflow-y-auto bg-blue-600">
      <div id='itemsContainer'>
        <div id="child221" class="h-96 w-full bg-yellow-200">child221</div>
        <div id="child222" class="h-96 w-full bg-yellow-300">child222</div>
        <div id="child223" class="h-96 w-full bg-yellow-400">child223</div>
        <div id="child224" class="h-96 w-full bg-yellow-500">child224</div>
      </div>
    </div>
  </div>
  <div id="child3" class="flex h-20 w-full items-center justify-center bg-green-400"><h3>Footer</h3></div>
</div>

Tailwind playground: https://play.tailwindcss.com/DjQyUBZ5iA

Problem is, if the element with id itemsContainer includes some elements, the element with id child22 is big, like the browser screen. Height of other elements are also broken. If is empty everything looks fine.

Is there some way to fix it?

I read Tailwind docs, search on Google, redesigned my page, but nothing helps.

Answer 1

It seems like you'd like child2 and child22 to fill the space between child1 and child3. child2 is growing beyond that due to the implicit min-height: min-content applied to it because of the parent vertical flex layout. However, you can override this by setting min-height to a different value, such as 0 via the min-h-0 Tailwind class:

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="parent" class="flex h-screen flex-col bg-red-600">
  <div id="child1" class="flex h-20 items-center justify-center bg-green-600"><h3>Header</h3></div>
  <div id="child2" class="flex h-full flex-row min-h-0">
    <div id="child22" class="scroll-y-auto h-full w-full overflow-y-auto bg-blue-600">
      <div>
        <div id="child221" class="h-96 w-full bg-yellow-200">child221</div>
        <div id="child222" class="h-96 w-full bg-yellow-300">child222</div>
        <div id="child223" class="h-96 w-full bg-yellow-400">child223</div>
        <div id="child224" class="h-96 w-full bg-yellow-500">child224</div>
      </div>
    </div>
  </div>
  <div id="child3" class="flex h-20 w-full items-center justify-center bg-green-400"><h3>Footer</h3></div>
</div>