Example 2: Understanding h-full and the Parent Height "Gotcha"

Correct: Parent with Defined Height

Parent (h-64)

Child (h-full) - Stretches!

Here, the parent has h-64 , so the child's h-full works as expected.

Gotcha: Parent with No Defined Height

Parent (height is auto/content-based)

Child (h-full) - Doesn't stretch as expected!

Some content in parent to give it some height.

Here, the parent's height is auto (derived from its content). The child's h-full has no explicit parent height to reference, so it collapses or only matches its own content height.

Fixing the Gotcha: Using Flex or Grid on Parent

One common way to make children fill height even if the parent's height is content-based is to make the parent a flex or grid container. However, for h-full to work directly, the parent *still* generally needs a defined height or be part of a layout system (like flex/grid items that stretch) that *gives* it a defined height.

Parent (flex, explicit height: 200px)

Child (h-full, flex-grow) - Stretches due to flex!

While h-full works here because the parent has an explicit height, flexbox itself provides mechanisms for items to stretch (e.g., flex-grow or default align-items: stretch ).