Width, height, and maximum size

Use w-full when a box should fill available width. Use fractions such as w-1/2 when the relationship is deliberate.

“Full” means 100% of the containing block, not automatically the viewport. Padding, Grid tracks, Flexbox sizing, and the parent’s own width all affect the final pixels.

Maximum-width utilities keep content readable:

<article class="mx-auto max-w-prose px-4">...</article>

mx-auto centers the constrained box. px-4 preserves space on narrow screens.

This pattern combines three decisions:

• w-full can let a control consume the available inline space
• max-w-prose prevents long lines from becoming uncomfortable
• mx-auto distributes leftover horizontal margin when the box is narrower than its container

Height needs a definite reference. h-full can only resolve usefully when the parent has a defined height. For a page that should reach the visible screen, min-h-dvh often expresses the intention better than forcing every ancestor to h-full; dynamic viewport units account for mobile browser UI more accurately than older fixed viewport assumptions.

Flex and Grid items have automatic minimum sizes. A long filename can overflow even inside a seemingly flexible row. min-w-0 tells a flexible item it may shrink below its content’s intrinsic width:

<div class="flex max-w-md gap-3">
  <div class="min-w-0 flex-1">
    <p class="truncate">a-very-long-file-name-that-must-fit.txt</p>
  </div>
</div>

Do not use a fixed height just to make cards look equal when content can wrap, zoom, or translate. Let layout tracks align items and use minimum sizes when the content may legitimately grow.

Your action is to place a long unbroken label inside a flexible row, observe the overflow, then add min-w-0. Test the readable article at narrow and wide widths and explain which box constrains it.