We Utterly Missed width/top: stretch

The stretch key phrase, which you should use 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 approach to implement the suitable worth for the suitable 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 value 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 trying on the accessible area. In brief, in the event you’ve ever wished 100% to truly imply 100% (when utilizing padding), stretch is what you’re on the lookout 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 nasty thought to revisit the CSS Field Mannequin for a refresher on totally different field sizings.

And on that observe — sure — we are able to obtain the identical outcome by declaring box-sizing: border-box, one thing that many people do, as a CSS reset actually.

*,
::earlier than,
::after {
  box-sizing: border-box;
}

I suppose that it’s due to this resolution that we forgot all in regards to the non-standard values and didn’t pay any consideration to stretch when it shipped, however I truly slightly 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 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 parts 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 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 would possibly need 100% to exclude padding, and in the event you’re a fussy coder like me you received’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. Should 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 have to interpolate its measurement, and you may solely try 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 internet browser help of stretch and the truth that calc-size() doesn’t help its non-standard alternate options. Sooner or later although, you’ll have the ability to use width: calc-size(stretch, measurement) within the instance above to interpolate simply that particular width.

Internet browser help

Internet browser help is proscribed to Chromium browsers for now:

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

Fortunately although, as a result of we’ve got 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 do 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 extensively supported, change to:

div {
  width: stretch;
}

In a nutshell

Whereas this may not precisely win Characteristic 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. Should you’d slightly use box-sizing: border-box, that’s completely tremendous — it really works rather well. Both method, extra methods to jot down and set up code is rarely 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!