The stretch key phrase, which you should use with width and peak (in addition to min-width, max-width, min-height, and max-height, after all), was shipped in Chromium net browsers again in June 2025. However the worth is definitely a unification of the non-standard -webkit-fill-available and -moz-available values, the latter of which has been out there to make use of in Firefox since 2008.
The problem was that, earlier than the @helps at-rule, there was no good strategy to implement the suitable worth for the suitable net browser, and I suppose we simply forgot about it after that till, whoops, at some point I see Dave Rupert casually put it on the market on Bluesky a month in the past:
Structure professional Miriam Suzanne recorded an explainer shortly thereafter. It’s value giving this worth a better look.
What does stretch do?
The fast reply is that stretch does the identical factor as declaring 100%, however ignores padding when wanting on the out there house. Briefly, in the event you’ve ever needed 100% to truly imply 100% (when utilizing padding), stretch is what you’re searching for:
div {
padding: 3rem 50vw 3rem 1rem;
width: 100%; /* 100% + 50vw + 1rem, inflicting overflow */
width: stretch; /* 100% together with padding, no overflow */
}The extra technical reply is that the stretch worth units the width or peak of the aspect’s margin field (fairly than the field decided by box-sizing) to match the width/peak of its containing block.
Observe: It’s by no means a nasty thought to revisit the CSS Field Mannequin for a refresher on completely different field sizings.
And on that observe — sure — we are able to obtain the identical end result by declaring box-sizing: border-box, one thing that many people do, as a CSS reset in reality.
*,
::earlier than,
::after {
box-sizing: border-box;
}I suppose that it’s due to this answer that we forgot all concerning the non-standard values and didn’t pay any consideration to stretch when it shipped, however I truly fairly like stretch and don’t contact box-sizing in any respect now.
Yay stretch, nay box-sizing
There isn’t an particularly compelling purpose to change to stretch, however there are a number of small ones. Firstly, the Common selector (*) doesn’t apply to pseudo-elements, which is why the CSS reset sometimes contains ::earlier than and ::after, and never solely are there far more pseudo-elements than we would suppose, however the rise in declarative HTML elements signifies that we’ll be seeing extra of them. Do you actually wish to preserve one thing like the next?
*,
::after,
::backdrop,
::earlier than,
::column,
::checkmark,
::cue (and ::cue()),
::details-content,
::file-selector-button,
::first-letter,
::first-line,
::grammar-error,
::spotlight(),
::marker,
::half(),
::picker(),
::picker-icon,
::placeholder,
::scroll-button(),
::scroll-marker,
::scroll-marker-group,
::choice,
::slotted(),
::spelling-error,
::target-text,
::view-transition,
::view-transition-image-pair(),
::view-transition-group(),
::view-transition-new(),
::view-transition-old() {
box-sizing: border-box;
}Okay, I’m being dramatic. Or perhaps I’m not? I don’t know. I’ve truly used fairly a couple of of those and having to take care of a listing like this sounds dreadful, though I’ve actually seen crazier CSS resets. In addition to, you may need 100% to exclude padding, and in the event you’re a fussy coder like me you gained’t take pleasure in un-resetting CSS resets.
Animating to and from stretch
Opinions apart, there’s one factor that box-sizing actually isn’t and that’s animatable. In the event you didn’t catch it the primary time, we do transition to and from 100% and stretch:
As a result of stretch is a key phrase although, you’ll must interpolate its dimension, and you may solely do this by declaring interpolate-size: allow-keywords (on the :root if you wish to activate interpolation globally):
:root {
/* Activate interpolation */
interpolate-size: allow-keywords;
}
div {
width: 100%;
transition: 300ms;
&:hover {
width: stretch;
}
}The calc-size() operate wouldn’t be helpful right here because of the net browser assist of stretch and the truth that calc-size() doesn’t assist its non-standard alternate options. Sooner or later although, you’ll be capable of use width: calc-size(stretch, dimension) within the instance above to interpolate simply that particular width.
Net browser assist
Net browser assist is proscribed to Chromium browsers for now:
- Opera 122+
- Chrome and Edge 138+ (140+ on Android)
Fortunately although, as a result of we have now these non-standard values, we are able to use the @helps at-rule to implement the suitable worth for the suitable browser. The easiest way to try this (and strip away the @helps logic later) is to save lots of the suitable worth as a customized property:
:root {
/* Firefox */
@helps (width: -moz-available) {
--stretch: -moz-available;
}
/* Safari */
@helps (width: -webkit-fill-available) {
--stretch: -webkit-fill-available;
}
/* Chromium */
@helps (width: stretch) {
--stretch: stretch;
}
}
div {
width: var(--stretch);
}Then later, as soon as stretch is broadly supported, swap to:
div {
width: stretch;
}In a nutshell
Whereas this won’t precisely win Function of the 12 months awards (I haven’t heard a whisper about it), quality-of-life enhancements like this are a few of my favourite options. In the event you’d fairly use box-sizing: border-box, that’s completely wonderful — it really works rather well. Both approach, extra methods to jot down and set up code isn’t a nasty factor, particularly if sure methods don’t align together with your psychological mannequin.
Plus, utilizing a model new function in manufacturing is simply too tempting to withstand. Irrational, however tempting and satisfying!
