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 · 4 comments
Open

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

bfgeek opened this issue Apr 25, 2025 · 4 comments
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.

@Loirooriol
Copy link
Contributor

Loirooriol commented Apr 27, 2025 •
edited
Loading

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

The min-content/max-content cross size of a single-line flex container is the largest min-content contribution/max-content contribution (respectively) of its flex items.

But that's not the minimum that Blink is using, since here the container gets an inner height of 80px, not 50px:

<!DOCTYPE html>
<div style="display: flex; min-height: min-content; height: 10px; border: solid 3px; place-items: baseline; line-height: 20px">
  <div style="background: lime; min-height: 50px">hi there</div>
  <div style="background: magenta; min-height: 50px; align-content: end">hi there</div>
</div>

CSS Grid adds a shim, but I'm not seeing that in the flexbox spec. So apparently Blink is using the height of the line, instead of just taking the largest contribution among the items.

This was referenced May 12, 2025
Closed
Merged
@servo-wpt-sync servo-wpt-sync mentioned this issue May 14, 2025
Merged
@Loirooriol
Copy link
Contributor

Blink has this behavior which seems weird to me:

<!DOCTYPE html>
<div style="display: flex; min-height: min-content; height: 10px; border: solid 3px;">
  <div style="background: lime; height: 50px;">hi there</div>
</div>
<div style="display: flex; min-height: min-content; height: 10px; border: solid 3px;">
  <div style="background: lime;">hi there</div>
</div>

github-merge-queue bot pushed a commit to servo/servo that referenced this issue May 15, 2025
@Loirooriol
layout: Obey intrinsic min/max block sizes on flex containers (#36973)
cd0dbb9 
Intrinsic sizing keywords weren't working correctly on the min and max
block sizes of a flex container, because we weren't setting the
`CacheableLayoutResult::content_block_size` to the right value. This
also ensures that `align-content` aligns within the final size of the
container.

Note it's not very clear what to do for single-line containers, they are
being discussed in w3c/csswg-drafts#12123

Testing: Adding new WPT tests. There are still some failures, but most
subtests would fail without this change.
Fixes: #36981

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
@bfgeek
Copy link
Author

bfgeek commented May 15, 2025

Yeah that falls out of the fact that the available-block-size etc. is definite when measuring (which isn't true for multi-line flexboxes for example). I'm not sure we can change that given how compat constrained we are with flexbox these days.

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
3 participants
@bfgeek @Loirooriol @gitspeaks