We Fully Missed width/top: stretch

The stretch key phrase, which you should utilize with width and top (in addition to min-width, max-width, min-height, and max-height, in fact), was shipped in Chromium internet 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 accessible to make use of in Firefox since 2008.

The problem was that, earlier than the @helps at-rule, there was no good option to implement the best worth for the best internet 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 price giving this worth a more in-depth 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 accessible house. Briefly, in the event you’ve ever wished 100% to really 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 top of the aspect’s margin field (slightly than the field decided by box-sizing) to match the width/top of its containing block.

Be aware: It’s by no means a foul thought to revisit the CSS Field Mannequin for a refresher on completely different field sizings.

And on that word — 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 truth.

*,
::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 really slightly like stretch and don’t contact box-sizing in any respect now.

Yay stretch, nay box-sizing

There isn’t an particularly compelling cause 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 consists of ::earlier than and ::after, and never solely are there far more pseudo-elements than we’d suppose, however the rise in declarative HTML elements implies that we’ll be seeing extra of them. Do you actually wish to keep 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 possibly I’m not? I don’t know. I’ve really used fairly a couple of of those and having to take care of an inventory like this sounds dreadful, though I’ve definitely seen crazier CSS resets. Moreover, you would possibly 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 definitely isn’t and that’s animatable. If you happen to 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 have to interpolate its dimension, and you’ll 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() perform wouldn’t be helpful right here because of the internet browser help of stretch and the truth that calc-size() doesn’t help its non-standard options. Sooner or later although, you’ll be capable to use width: calc-size(stretch, dimension) within the instance above to interpolate simply that particular width.

Net browser help

Net browser help is restricted to Chromium browsers for now:

• Opera 122+
• Chrome and Edge 138+ (140+ on Android)

Fortunately although, as a result of we’ve these non-standard values, we are able to use the @helps at-rule to implement the best worth for the best browser. One of the simplest ways to do this (and strip away the @helps logic later) is to save lots of the best 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, change to:

div {
  width: stretch;
}

In a nutshell

Whereas this may not 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. If you happen to’d slightly use box-sizing: border-box, that’s completely fantastic — it really works rather well. Both approach, extra methods to write down and arrange code is rarely a foul factor, particularly if sure methods don’t align together with your psychological mannequin.

Plus, utilizing a model new characteristic in manufacturing is simply too tempting to withstand. Irrational, however tempting and satisfying!