h-full Gotcha: Parent Height Matters

Gotcha: h-full with Auto Parent Height

The parent (gray border) below has no explicit height. Its height is determined by its content. The child (red background) has h-full , but it won't stretch because its parent's height is not defined explicitly.

Parent Div (auto height)

Child with h-full (Expected: Fill parent. Actual: Only as tall as this text.)

(Notice it doesn't fill the dashed border area unless this text makes it taller.)

Solution: h-full with Defined Parent Height

Here, the parent (teal border) has a defined height ( h-64 ). The child (green background) with h-full now correctly stretches to fill the parent's height.

Parent Div ( h-64 )

Child with h-full .
It correctly fills the parent because the parent has h-64 .

Key Takeaway (Gotcha):

For h-full to work on a child element, its direct parent must have a defined height. This can be a fixed height (e.g., h-64 , h-screen ) or a percentage height if the grandparent also has a defined height. If the parent's height is 'auto' (i.e., determined by its content), h-full on the child has no effect beyond the child's own content height.