w-full
and
h-full
within a Sized Parent
This example shows an outer container with a specific width and height. An inner element uses
w-full
and
h-full
to fill this parent.
Outer Container (w-1/2, h-96)
Inner Element
w-full
&
h-full
Fills the parent perfectly!
The outer container above is centered using
mx-auto
and has a width of
w-1/2
relative to its parent (which is the main content area defined by the body's padding).
The key takeaway:
h-full
on the inner div works because its direct parent (the indigo-200 div) has an explicitly defined height (
h-96
).