"What does stretch do? The quick answer is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space. In short, if you've ever wanted 100% to actually mean 100% (when using padding), stretch is what you're looking for: div { padding: 3rem 50vw 3rem 1rem; width: 100%; /* 100% + 50vw + 1rem, causing overflow */ width: stretch; /* 100% including padding, no overflow */ }"
"The more technical answer is that the stretch value sets the width or height of the element's margin box (rather than the box determined by box-sizing) to match the width/height of its containing block. Note: It's never a bad idea to revisit the CSS Box Model for a refresher on different box sizings. And on that note - yes - we can achieve the same result by declaring box-sizing: border-box, something that many of us do, as a CSS reset in fact."
"The issue was that, before the @supports at-rule, there was no nice way to implement the right value for the right web browser, and I suppose we just forgot about it after that until, whoops, one day I see Dave Rupert casually put it out there on Bluesky a month ago: Layout pro Miriam Suzanne recorded an explainer shortly thereafter. It's worth giving this value a closer look."
The stretch keyword shipped in Chromium browsers in June 2025 as a unification of -webkit-fill-available and -moz-available; -moz-available has been available in Firefox since 2008. Before the @supports at-rule, choosing the correct value per browser was awkward. Stretch behaves like declaring 100% but ignores padding when determining available space, preventing overflow that can occur when padding is present. Technically, stretch sets the element's margin box to match the containing block's dimensions. The same visual result can be achieved with box-sizing: border-box, though the author prefers using stretch instead of altering box-sizing.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]