**The Stretch Keyword: A New Way to Handle Width and Height in CSS**
In June 2025, a significant addition to CSS was introduced in Chromium web browsers: the `stretch` keyword for width and height. This value unifies the previously non-standard `-webkit-fill-available` and `-moz-available` values, which were used in Safari and Firefox respectively. However, before the `@supports` at-rule, there was no straightforward way to implement the correct value for each browser. The `stretch` keyword aims to simplify this process.
**What Does `stretch` Do?**
In essence, `stretch` behaves like `100%` but ignores padding when calculating the available space. If you’ve ever wanted `100%` to truly mean `100%` when considering padding, `stretch` is the solution you’ve been looking for.
“`css
div {
padding: 3rem 50vw 3rem 1rem;
width: 100%; /* 100% + 50vw + 1rem, causing overflow */
width: stretch; /* 100% including padding, no overflow */
}
“`
Technically, `stretch` sets the width or height of an element’s margin box to match the width/height of its containing block, rather than the box determined by `box-sizing`.
**`stretch` vs `box-sizing: border-box`**
Many developers use `box-sizing: border-box` to achieve similar results. While this method works well, using `stretch` has some advantages. For instance, the universal selector (`*`) doesn’t apply to pseudo-elements, which can make maintaining a CSS reset that includes `box-sizing: border-box` cumbersome, especially with the increasing use of declarative HTML components and pseudo-elements.
“`css
*, ::after, ::backdrop, ::before, ::column, ::checkmark, ::cue, ::details-content, ::file-selector-button, ::first-letter, ::first-line, ::grammar-error, ::highlight, ::marker, ::part, ::picker, ::picker-icon, ::placeholder, ::scroll-button, ::scroll-marker, ::scroll-marker-group, ::selection, ::slotted, ::spelling-error, ::target-text, ::view-transition, ::view-transition-image-pair, ::view-transition-group, ::view-transition-new, ::view-transition-old {
box-sizing: border-box;
}
“`
**Animating to and from `stretch`**
One limitation of `box-sizing` is that it’s not animatable. In contrast, `stretch` can be transitioned to and from, but you’ll need to declare `interpolate-size: allow-keywords` to interpolate its size.
“`css
:root {
interpolate-size: allow-keywords;
}
div {
width: 100%;
transition: 300ms;
&:hover {
width: stretch;
}
}
“`
**Web Browser Support**
Currently, `stretch` is only supported in Chromium browsers (Opera 122+, Chrome and Edge 138+). However, using the `@supports` at-rule, you can implement the correct value for each browser. Here’s how you can save the right value as a custom property:
“`css
:root {
/* Firefox */
@supports (width: -moz-available) {
–stretch: -moz-available;
}
/* Safari */
@supports (width: -webkit-fill-available) {
–stretch: -webkit-fill-available;
}
/* Chromium */
@supports (width: stretch) {
–stretch: stretch;
}
}
div {
width: var(–stretch);
}
“`
Once `stretch` is widely supported, you can switch to `width: stretch;` directly.
**Conclusion**
While `stretch` might not be a groundbreaking feature, it offers a quality-of-life improvement for developers. It provides another way to write and organize CSS, which can align better with some developers’ mental models. Moreover, using a new feature in production can be satisfying and help drive browser adoption. So, give `stretch` a try and see if it fits your workflow.
