[csswg-drafts] [css-flexbox-1] Intrinsic size of single line flexbox. (#12123)

bfgeek has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox-1] Intrinsic size of single line flexbox. ==
Take the following example:
```
<!DOCTYPE html>
<div style="display: flex; min-height: min-content; height: 10px; border: solid 3px;">
  <div style="background: lime; min-height: 50px;">hi there</div>
</div>
```
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13717

The *initial block-size* of the flexbox is `10px`. Because this is a single line, the flex-line size becomes 10px, and hence thats the intrinsic-size.
As per:
https://drafts.csswg.org/css-flexbox-1/#algo-cross-line
> If the flex container is [single-line](https://drafts.csswg.org/css-flexbox-1/#single-line-flex-container) and has a [definite](https://drafts.csswg.org/css-flexbox-1/#definite) [cross size](https://drafts.csswg.org/css-flexbox-1/#cross-size), the cross size of the [flex line](https://drafts.csswg.org/css-flexbox-1/#flex-line) is the [flex container](https://drafts.csswg.org/css-flexbox-1/#flex-container)’s inner cross size.

In Blink we had a unintentional bug where we'd re-compute the block-size with the intrinsic size of the line. (Resulting in 50px in the line above).

However this bug does provide a better behaviour.

Note we have compat on a very simlar case wrt. aspect-ratio:
```
<!DOCTYPE html>
<div style="display: flex; min-height: auto; aspect-ratio: 100/1; width: 100px; border: solid 3px;">
  <div style="background: lime; min-height: 50px;">hi there</div>
</div>
```

E.g. the min-height is intrinsic, and we all recompute the initial block-size based on this.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12123 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 25 April 2025 21:24:58 UTC