Intent to Ship: CSS 'stretch' sizing keyword
David Grogan
Contact emails
dgr...@chromium.orgExplainer
Behaves as 100%, except it sizes the margin box regardless of the value of box-sizing.Specification
https://drafts.csswg.org/css-sizing-4/#sizing-valuesSummary
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. An unprefixed version of '-webkit-fill-available'.
Blink component
Blink>LayoutSearch tags
stretch, fillTAG review
NoneTAG review status
Not applicableRisks
Interoperability and Compatibility
Each of the three major engines already has a rough implementation of this feature from before it was specified. (Named -moz-available and -webkit-fill-available). The three behaviors are not interoperable. The intention of this new 'stretch' keyword is to align the engines on this specified behavior which differs slightly from each of the prefixed versions. We expect the behavior of this feature to be fully interoperable. Gecko has taken part in the specification discussions (e.g. https://github.com/w3c/csswg-drafts/issues/11044) and has contributed tests (https://bugzilla.mozilla.org/show_bug.cgi?id=1937624)
Gecko: Positive (https://github.com/mozilla/standards-positions/issues/1054)
WebKit: No signal (https://github.com/WebKit/standards-positions/issues/401)
Web developers: Positive (https://github.com/web-platform-tests/interop/issues/726) An author requested this to be part of Interop2025. Lots of +1 on the chrome bug.
Other signals:
Ergonomics
None
Activation
Nope. Will be usable immediately
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
None
Debuggability
Existing CSS and layout devtools panel works fine.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
YesIs this feature fully tested by web-platform-tests?
YesFlag name on about://flags
NoneFinch feature name
LayoutStretchRequires code in //chrome?
FalseTracking bug
https://crbug.com/41253915Availability expectation
Gecko has started work and will probably finish in < 1 year.Non-OSS dependencies
Does the feature depend on any code or APIs outside the Chromium open source repository and its open-source dependencies to function?
NoEstimated milestones
| Shipping on desktop | 136 |
| Shipping on Android | 136 |
| Shipping on WebView | 136 |
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
https://github.com/w3c/csswg-drafts/issues/4028 -- There is consensus among members of Apple, Mozilla, and Google on the issue. No significant arguments against the proposal that we followed (https://github.com/w3c/csswg-drafts/issues/4028#issuecomment-2372348130)