Skip to content

[css-flexbox-1] Intrinsic size of single line flexbox. #12123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
bfgeek opened this issue Apr 25, 2025 · 1 comment
Open

[css-flexbox-1] Intrinsic size of single line flexbox. #12123

bfgeek opened this issue Apr 25, 2025 · 1 comment
Labels
css-flexbox-1 Current Work

Comments

@bfgeek
Copy link

bfgeek commented Apr 25, 2025

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 and has a definite cross size, the cross size of the flex line is the 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.
@bfgeek bfgeek added the css-flexbox-1 Current Work label Apr 25, 2025
@gitspeaks
Copy link

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).

I'm not entirely sure this should be considered a bug. According to 10.7. Minimum and maximum heights: min-height and max-height:

The following algorithm describes how the two properties influence the used value of the height property:

  1. The tentative used height is calculated (without min-height and max-height) following the rules under "Calculating heights and margins" above.
  2. If this tentative height is greater than max-height, the rules are applied again, but this time using the value of max-height as the computed value for height.
  3. If the resulting height is smaller than min-height, the rules are applied again, but this time using the value of min-height as the computed value for height.

In your initial example, it seems that the height: 10px is only a tentative value in the presence of min-height: min-content, so it’s not completely clear whether the flex line sizing should be based on the tentative or the adjusted height. In fact, following 10.7, it reads as though min-height must be considered before finalizing the height, suggesting that recomputing based on the intrinsic size (and ending up at 50px) is actually expected behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-flexbox-1 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bfgeek @gitspeaks