Intent to Prototype: CSS 'stretch' sizing keyword

Contact emails

Explainer

Specification

Summary

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 as large as possible. Essentially an unprefixed version of '-webkit-fill-available'.

Blink component

Motivation

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.

Initial public proposal

TAG review

TAG review status

Risks

Debuggability

None

Is this feature fully tested by web-platform-tests?

No tests yet. Will add before enabling.

Flag name on chrome://flags

Finch feature name

Non-finch justification

Requires code in //chrome?

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status