While scrolling my Bluesky feed, I happen to chance upon @intenttoship.dev’s update about Blink shipping a CSS stretch sizing keyword. I was a bit puzzled at first since I totally ignored the sizing part of the announcement and was wondering why on earth are they posting about something that’s already shipped?

After patiently reading the full announcement, I realized this is about using the stretch keyword with width and height properties. The post summary says (emphasis mine):

A keyword for CSS sizing properties (e.g. ‘width’, ‘height’) that allows elements to grow to exactly fill their containing block’s available space. It is similar to ‘100%’, except the resulting size is applied to the element’s margin box instead of the box indicated by ‘box-sizing’. Using this keyword allows the element to keep its margins while still being as large as possible. An unprefixed version of ‘-webkit-fill-available’.

That last sentence was surprising to me — this keyword is already available in all major browsers as -webkit-fill-available. The latter is also documented on MDN under -webkit-prefixed CSS extensions page.

I coded up an example to understand the difference. I made two parent boxes, one with child item A and one with item B. Both children have left/right margins via margin-inline and I’m trying to expand them to fill the parent container using width: 100% and width: -webkit-fill-available. I also included width: stretch so this example is up-to-date when that’s supported. I’m also applying box-sizing: border-box for everything since that’s the sane thing to do.

<div class="parent">
    <div class="item a">
        A. width: 100% with margin-inline
    </div>
</div>

<div class="parent">
    <div class="item b">
        B. width: -webkit-fill-available with margin-inline
    </div>
</div>

* { box-sizing: border-box; }

.parent {
    width: 75%;
    height: 100px;
    border: 1px solid #ccc;
    margin-bottom: 50px;
}

.item {
    margin-inline: 20px;
    border: 1px solid red;
}

.item.a {
    width: 100%;
}

.item.b {
    width: -webkit-fill-available;
    width: stretch;
}

This behaves as expected for me on Safari, Firefox and Chrome.

The child item A which uses width: 100% overflows outside its parent. width: 100% expands the item to fill the containing block of its parent. But this doesn’t take into account any margins applied on item A, only the border box area of item A is considered for applying width. Hence, it ends up overflowing.

Item B on the other hand is using width: -webkit-fill-available which also takes into account any margins when applying width. So, it seems to correctly expand the child to fill its parent avoiding any overflow.

Since this keyword should also apply to height, I adapted the previous example to see if it behaves as expected when both width and height are used with 100% and -webkit-fill-available values:

<div class="parent">
    <div class="item a">
        A. width and height using value 100% with margin
    </div>
</div>

<div class="parent">
    <div class="item b">
        B. width and height using value -webkit-fill-available with margin
    </div>
</div>

* { box-sizing: border-box; }

.parent {
    width: 75%;
    height: 100px;
    border: 1px solid #ccc;
    margin-bottom: 50px;
}

.item {
    margin: 20px;
    border: 1px solid red;
}

.item.a {
    width: 100%;
    height: 100%;
}

.item.b {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    width: stretch;
    height: stretch;
}

Item B in this example will now expand to fill its parent on both x and y axes whereas item A overflows both. While Chrome and Firefox seem to reproduce this as expected, Safari (18.4) seems to be having trouble when using the height: stretch declaration. If I remove the stretch keyword usages, all browsers reproduce this as expected in my observation. Perhaps Safari will iron this out when they officially add support for stretch.

Overall, this is a welcome addition. I can recall several occassions where I had to enclose a shared/third-party/uncontrolled component inside a wrapper which came with margins pre-applied. Instead of overriding those margins somehow and then applying 100% to width/height, we can now use stretch to solve many problems with one easy solution.