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.
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>