- From: Ian Kilpatrick via GitHub <sysbot+gh@w3.org>
- Date: Fri, 25 Apr 2025 21:24:57 +0000
- To: public-css-archive@w3.org
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