v138 · css

CSS 'stretch' sizing keyword

A keyword for CSS sizing properties (e.g. 'width', 'height') that allows elements to grow to exactly fill their containing block's available space. It is similar to '100%', except the resulting size is applied to the element's margin box instead of the box indicated by 'box-sizing'. Using this keyword allows the element to keep its margins while still being

concepts

  1. stretch keyword

    stretch is the standardised version of the long-standing -webkit-fill-available. Cleaner cross-browser fill-the-parent semantics.

  2. Margin-aware form fields

    The real-world bug width: 100% creates and stretch finally fixes: form inputs that fill the column without overflowing when they have their own margin.

  3. Sizing keyword comparison lab

    Eight boxes in one parent, each with a different width keyword. Sliders for container width, margin, and padding. Live overflow flags. stretch is the only row that never overflows.

  4. Grid cell gutter fix

    The classic overflow bug: width: 100% on an input inside a grid cell overflows when the cell has padding. width: stretch fills the available space accounting for margins and padding. Adjust sliders to see the difference at different padding and margin values.

  5. Sidebar layout

    An app frame with topbar + sidebar + content. Toggle between height: 100% (overflows), height: calc(…) (fragile manual math), and height: stretch (clean fill with margins intact). A margin gotcha strip shows the three approaches side-by-side at a glance.

why it shipped

To get this behavior without this new property you have to jump through hoops. You can use align/justify-self:stretch, but then you can't use align/justify-self to actually align the element. Also, not all layout modes support align/justify-self in both the inline and block directions. Alternatively, in many situations but not all, you can use a variable to store the element's margins and refer to the variable in both the margin and sizing properties, like height:calc(100% - var(--my-margin)). That's clearly a hassle.

references