CSS Flexbox Sizing

[davidsgrogan]

Description

This proposal is about intrinsic sizing of column-wrap flex containers.

In August 2023, Blink was the first engine to ship spec-conforming behavior for this feature in Chrome 116. Developer demand was high; it was the most-starred flexbox bug in the tracker with 80 stars. Blink's shipping implementation in 2023 demonstrated that the specified behavior is web compatible.

UseCounter shows this feature on >6% of page loads: https://chromestatus.com/metrics/feature/timeline/popularity/5043

Note: If there is an overarching Layout focus area again in 2025, it would be appropriate to include this feature in the Layout Focus Area, rather than making this a separate focus area.

Specification

https://drafts.csswg.org/css-flexbox/#intrinsic-cross-sizes

Additional Signals

Standards Positions Gecko: No information WebKit: No information

Tests https://wpt.fyi/results/css/css-flexbox?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=subtest&q=col-wrap%20or%20multiline-shrink-to-fit.html%20or%20inline-flexbox-wrap-vertically-width-calculation.html

Browser Bugs https://issues.chromium.org/40425575 (73 stars) https://bugzilla.mozilla.org/show_bug.cgi?id=995020 https://bugs.webkit.org/show_bug.cgi?id=157648

Additional Signals Use counter - https://chromestatus.com/metrics/feature/timeline/popularity/5043

[gsnedders]

If I'm reading through this correctly, this is the behaviour changed in https://github.com/w3c/csswg-drafts/issues/6777?

Though, as a historic note: the Chromium bug has a comment from 2016 implying this was already spec'd in a way that solves the original Chromium bug — which I guess is https://github.com/w3c/csswg-drafts/commit/648b3c3a5 / https://github.com/w3c/csswg-drafts/commit/978066c8a?

[davidsgrogan]

This is about implementing the changes made to the spec in 2015 and 2022 combined.

Gecko and Webkit still ship the pre-2015 algorithm. As did Blink until last year.