Intent to prototype: CSS 'stretch' sizing keyword (with '-webkit-fill-available' as an alias)

Daniel Holbert

unread,

Jul 25, 2024, 1:39:25 PMJul 25

to dev-pl...@mozilla.org

Summary: This is a keyword for CSS sizing properties (e.g. 'width', 'height') that allows elements to grow to exactly fill their containing block's available space (similar to our existing supported '-moz-available' keyword, though that moz-prefixed keyword only works in one axis for now, while these keywords won't have that restriction)
Bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=1789477 for 'stretch'
https://bugzilla.mozilla.org/show_bug.cgi?id=1872755 for '-webkit-fill-available'
Specification: https://drafts.csswg.org/css-sizing-4/#valdef-width-stretch
Standards Body: CSSWG
Platform coverage: All platforms
DevTools bug: N/A (as a new sizing keyword, this Just Works with existing DevTools)
Link to standards-positions discussion: https://github.com/mozilla/standards-positions/issues/1054
Other browsers:
Blink: shipped the -webkit-fill-available keyword for this behavior since ~forever, and they're working on the unprefixed "stretch" keyword as well per https://github.com/web-platform-tests/interop-2022-viewport/issues/18#issuecomment-1268722823
WebKit: shipped the -webkit-fill-available keyword for this behavior since ~forever. I'm not sure if/when they're planning to ship the unprefixed "stretch" name.

web-platform-tests: No substantial WPTs for "stretch" or "-webkit-fill-available" exist yet, but I plan to add some WPTs before enabling either of these keywords by default on any channel.

Daniel Holbert

unread,

Sep 24, 2024, 12:48:58 AMSep 24

to 一丝, dev-pl...@mozilla.org

Thanks. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1920634 on this. I think Firefox's rendering is correct here, as I explained on the bug, but it's worth tracking the behavior-difference.

On Mon, Sep 23, 2024 at 9:29 PM 一丝 <yio...@gmail.com> wrote:

Currently Firefox and Chrome don't agree on how to calculate the width of a float element.

https://issues.chromium.org/issues/41368104

```html
data:text/html;charset=UTF-8,<!DOCTYPE html>
<div style="float:left; width:100px; height:100px; border:1px solid;">float</div>
<div style="overflow:hidden; width:-webkit-fill-available; background:cyan;">
Should this go below the float, or beside it?
</div>
```

一丝

unread,

Sep 24, 2024, 10:50:41 AMSep 24

to dev-pl...@mozilla.org, dhol...@mozilla.com

Currently Firefox and Chrome don't agree on how to calculate the width of a float element.

https://issues.chromium.org/issues/41368104

```html

data:text/html;charset=UTF-8,<!DOCTYPE html>
<div style="float:left; width:100px; height:100px; border:1px solid;">float</div>
<div style="overflow:hidden; width:-webkit-fill-available; background:cyan;">
Should this go below the float, or beside it?
</div>

```

在2024年7月26日星期五 UTC+8 01:39:25<dhol...@mozilla.com> 写道：

Oriol Brufau

unread,

Sep 24, 2024, 8:38:33 PMSep 24

to dev-pl...@mozilla.org, dhol...@mozilla.com

See https://software.hixie.ch/utilities/js/live-dom-viewer/saved/13121

- Firefox stretches the abspos in the inline axis but not in the block axis. Both for `stretch` and `-webkit-fill-available` (enabling the relevant prefs).

- WebKit and Blink stretch the abspos in both axes. Only for `-webkit-fill-available`, they don't support `stretch`.

El dia dijous, 25 de juliol del 2024 a les 10:39:25 UTC-7, dhol...@mozilla.com va escriure:

Daniel Holbert

unread,

Sep 24, 2024, 8:44:45 PMSep 24

to Oriol Brufau, dev-pl...@mozilla.org

Yup, thanks - that's known issue that'll be fixed before enabling. I'm working on the block axis stretching right now. (My work on this was on hold for a bit due to other projects, but I'm working on it again now.)

Reply all

Reply to author

Forward