div h-full takes parent height even if there is a sibling in the same div TailwindCSS
Problem: My div containing my text content overflows its parent whit full height
Desired: The height of the div containing text content to fill the rest of available height of its parent
Code: https://stackblitz.com/edit/web-platform-7gwuv1?file=index.html
10 Replies
If your text is to much, it will overflow, if you do not set overflow.
The element you put
h-full is 100% of its parent (just moved down a bit). If you want an element to take up the remaining space flex-grow may be the solution you are looking for.Changing the text amount does not change the size of its parent
Are you talking about when your screen goes above the
md: breakpoint?e.g.
No i am more referring to this:
i think what you want is a h-full minus the height of the HEADER 😉
How do i get that if i do not know the height of the header ?
you can use js for it
I think i fixed it ...
By making the div containing header and body a Flex dir-col fixed it :p
just grid would also work i guess
but flex is better option