Example 2: The `h-full` Gotcha

This example demonstrates the common pitfall with `h-full`: it only works if the direct parent has a defined height.

Scenario 1: `h-full` on Child, Parent Height is Auto (Gotcha)

The red child below has `h-full`. However, its gray parent has no explicit height (its height is determined by its content). Thus, the child's `h-full` does not make it stretch.

Parent (height: auto)

Child with `h-full` (appears small as parent has no fixed height for `h-full` to inherit from)
Content inside child.

Notice the red child does not fill the gray parent vertically, even though it has `h-full`.

Scenario 2: `h-full` on Child, Parent Has Defined Height (Corrected)

The green child below also has `h-full`. This time, its gray parent has a defined height (`h-48`). Now, the child's `h-full` works as expected.

Parent (h-48)

Child with `h-full` (fills parent)

Here, the green child correctly fills its parent vertically.

Gotcha Explanation:

The class `h-full` sets an element's height to 100% of its parent's height. If the parent element does not have an explicitly defined height (e.g., using Tailwind's `h-*` utilities like `h-48`, `h-screen`, or CSS `height: value;`), then `h-full` on the child will not have the desired effect of stretching it, because "100% of an undefined height" is itself undefined or based on the child's own content.