[css-flex] Min-content sizing currently too smart to be web compatible?

[FremyCompany]

Hi css-flexers from all around the world,

I just wanted to report that our attempt to update our flex implementation sizing algorithm to match the spec encountered a few hiccups, but this one seems like the most concerning so far:

https://wptest.center/#/677dj4 (CSS Flexbox min-content size seems problematic)
vs

The pattern we are seeing is authors using

in min-content sized/constrained flexboxes, and the icon ends up disappearing because flex-shrink defaults to 1 by default.

I think we should update the specification such that an explicit width acts as a minimum width (even though it could theorically be shrunk).

In general, the automatic minimum size of a flex item is its specified size if it is defined, or its content size otherwise. However, if the box has an aspect ratio and no specified size, its automatic minimum size is the smaller of its content size and its transferred size. If the box has neither a specified size nor an aspect ratio, its automatic minimum size is the content size.

instead of

In general, the automatic minimum size of a flex item is the smaller of its content size and its specified size. However, if the box has an aspect ratio and no specified size, its automatic minimum size is the smaller of its content size and its transferred size. If the box has neither a specified size nor an aspect ratio, its automatic minimum size is the content size.

[FremyCompany]

cc @fantasai @tabatkins @dholbert

[FremyCompany]

Another option is to introduce flex-shrink-mode: prescriptive | corrective which defaults to corrective (but defaults to prescriptive if flex-shrink is defined but flex-shrink-mode is omitted?), and acts as a toggle for whether the shrink is considered during the min-content-sizing phase or not.

[dholbert]

The pattern we are seeing is authors using

in min-content sized/constrained flexboxes

There, the icon (i.e. the div) would only shrink if the flex container is skinnier than 32px, right? So, it sounds like the issue is that you're getting is that your "min-content sized/constrained flexbox" is being forced to be too skinny for what its contents really want here.

Does the flex container's min-content sizing algorithm produce something less than 32px in this case? If so, maybe that's what we should amend?

[FremyCompany]

@dholbert that is my proposal indeed. the spec says that you take the minimum of the specified width of the flex item and its content width; since there is no content in the icon div, the content width is 0px and it completely erases the specified width.

[css-meeting-bot]

The Working Group just discussed [css-flex] Min-content sizing currently too smart to be web compatible?.

The full IRC log of that discussion

Topic: [css-flex] Min-content sizing currently too smart to be web compatible?
github: https://github.com//issues/2353
TabAtkins: I need to review this with fantasai
fremy: Then I can introduce it before next week
fremy: We tried to update Edge to folow spec for flex-basis. A lot of websites if you spec width or height even if there isn't content it's respected for min-content sizing.
fremy: We probably don't want ot change this alone or first. Let's discuss next week.

[fantasai]

Tab and I think @dholbert’s explanation in #2353 (comment) makes the most sense as a way to address this, so we've drawn up some edits for it, see https://drafts.csswg.org/css-flexbox-1/#change-2017-flex-min-contribution

@dholbert @FremyCompany Please let us know if this seems like a good way to solve the problem. We'll also be running it past the CSSWG shortly to confirm with them as well.

[css-meeting-bot]

The Working Group just discussed Min-content of shrinkable flex items.

The full IRC log of that discussion

Topic: Min-content of shrinkable flex items
github: https://github.com//issues/2353
TabAtkins: We made some edits and we need to WG to approve.
Rossen: Can you go over the edits?
https://drafts.csswg.org/css-flexbox-1/#change-2017-flex-min-contribution
TabAtkins: Last comment in the issue has a link to the change
fremy: I need to process it.
astearns: Anyone else want a summary?
Rossen: Let's get back tomorrow. I want to look as well b/c I spent time working on this issue. We had a change fixing some edge inconsistencies with this problem. We have to back it out because it seemed others were inconsistant.
fantasai: We went with dholbert's solution over fremy.
astearns: There's a 2nd layout section Thursday morning. Let's add this then

[css-meeting-bot]

The Working Group just discussed Min-content sizing currently too smart to be web compatible?, and agreed to the following resolutions:

• RESOLVED: Accept the proposal

The full IRC log of that discussion

Topic: Min-content sizing currently too smart to be web compatible?
github: https://github.com//issues/2353
fremy: The issue was that...min-content by default when you can shrink could shrink to the min-content. Web expected width as well. I reviewed the change and it seems right, but the summary was missing details.
fremy: Still means you have elements that could shrink further but will not. I'm fine with the change how written.
Rossen: What's the summary?
fantasai: We made the min-content contribution of the flex item consider width and height.
??: Does it match what min-width auto computes to?
fremy: Spec changed the minimum size all the time. Width works anyway.
s/??/biesinger/
fantasai: Because if we change how min-width auto works it would change how ti shrinks down
s/biesinger/cbiesinger/
fantasai: We had to do it through the min-content contribute tion through auto because the web depends on it.
Rossen: Prop resolution is accept this change?
fremy: The width and heigh property does effect min-content contribution, right?
fantasai: Yeah.
cbiesinger: We don't impl min0size contribution per spec. Does anyone?
Rossen: We're close. We had reworking recently and since we were close to shipping we had to pull back due to unexpected side effects. This is part of the changes.
Rossen: So, kind of.
cbiesinger: You find it web compat?
fremy: We won't know unitl we do this fix and try again.
cbiesinger: Can you prioritize?
Rossen: Yes fingers cross.
Rossen: Obj?
s/min0size contribution/intrinsic size computation/
s/Can yoy/I should/
RESOLVED: Accept the proposal