demo · v138

Form fields that respect margins

The case -webkit-fill-available existed to solve and width: 100% never could: a form input that fills the available column but leaves its own right-margin alone. Drag the container edge to see stretch behave; the old approach overflows.

checking stretch keyword…

Drag the right edge of this dashed container to resize. The top row uses width: 100%. The bottom uses width: stretch.

width: 100% (legacy) — overflows because the input’s own right-margin is added after 100% of the column.

width: stretch (138) — sizes to the available margin box. The 0.5rem right margin is respected; no overflow.

the difference

/* legacy: % is taken from the *content* edge, then margin is added on top */
.input  { width: 100%; margin-right: 0.5rem; }       /* → overflows by 0.5rem */

/* 138: stretch is the standardised -webkit-fill-available */
.input  { width: stretch; margin-right: 0.5rem; }    /* → honours the margin */

Authors have been writing width: -webkit-fill-available for a decade to get this behaviour. The stretch keyword standardises it cross-browser, so the hack can finally retire.

see also