demo · v138

Sizing keyword comparison lab

Eight boxes, one parent — each box uses a different width keyword. The container width, child margin, and padding are all sliders; watch which boxes overflow, which leave whitespace, and which gracefully cope. stretch is the one that wins every case.

Unflagged in Chrome 138. width: stretch is the standardised replacement for the long-standing -webkit-fill-available. It sizes the margin box to the containing block, so margins still work.
probing width: stretch…
width: autodefault — shrinks to content
auto
width: 100%overflows when margin > 0 (the classic bug)
100%
width: 100% + box-sizing: border-boxfixes padding overflow but margin still breaks it
100% + bb
-webkit-fill-availablethe prefixed predecessor — same idea as stretch
fill-available
width: fit-contentstops at content size
fit-content
width: max-contentgrows to preferred size, often overflows
max-content
width: stretch v138sizes the margin box to the container — never overflows
stretch
width: stretch + box-sizing: border-boxsame — bb has no effect because stretch already covers the margin box
stretch + bb

The classic bug, side-by-side

/* before v138 — every one of these has at least one failure mode */
.bad     { width: 100%;             }   /* + any margin → overflow */
.fixed   { width: calc(100% - 64px); }   /* couples width to a magic number */
.layout  { width: -webkit-fill-available; }   /* prefixed, Chrome-only-ish */
.flex    { /* hack: switch to flexbox just to get align-self: stretch */ }

/* v138 — one line, just works */
.good    { width: stretch; }            /* the margin box fills the container */

What's happening

  1. width: 100% sizes the content box (or, with box-sizing: border-box, the border box). It does not account for margin. So a 100%-wide box with margin overflows by twice the margin.
  2. width: stretch sizes the margin box — the outermost box — to the containing block. Whatever margin you set, the box neatly fits, edges aligned.
  3. Try dragging the margin slider above 0. Watch which rows develop a red overflow flag and which stay neat.
  4. Bonus property: height: stretch works too. Until now the only way to fill the remaining vertical space and leave margin was a flexbox / grid hack. Now it's one keyword.

see also