1681044 - Intrinsic width of flex box is wrong if flex items have flex-shrink: 0

Status: RESOLVED DUPLICATE of bug 1055887

(Core :: Layout: Flexbox, defect)

Description

[Candid Dauth]

Attachment: flex.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36

Steps to reproduce:

The behaviour that I'm seeing is that the intrinsic width of a flex box whose items are prevented from shrinking is calculated as if those items could shrink.

Take this simple flex box whose items can shrink (in this case because their text can break lines):

(https://jsfiddle.net/9ac5dgo8/1/)
<div style="display: flex; width: min-content">
<div>Test content</div>
<div>Test content</div>
</div>

Because the width of the flex box is set to its intrinsic width (using width: min-content), the text inside the flex items breaks lines, and the flex box properly resizes according to its content.

Now, adding flex-shrink: 0 to the flex items prevents flex items from wrapping, so their width increases. But the width of the flex box stays the same as if they were still wrapping: https://jsfiddle.net/9ac5dgo8/2/
I've attached a screenshot.

Adding white-space: nowrap to the flex container fixes the size in this case: https://jsfiddle.net/9ac5dgo8/3/. Giving a fixed width to the flex items also does, as expected: https://jsfiddle.net/9ac5dgo8/4/. On the other hand, controlling the width through flex-basis invokes the unexpected behaviour again: https://jsfiddle.net/9ac5dgo8/6/

The issue can also be observed when the flex box is contained inside a table where the column containing the flex box is competing for width with other columns:
https://jsfiddle.net/9ac5dgo8/7/
<table>
<tr>
<td>[Really long content]</td>
<td>
<div style="display: flex">
<div style="flex-shrink: 0">Test content</div>
<div style="flex-shrink: 0">Test content</div>
</div>
</td>
</tr>
</table>

Chromium shows the same behaviour, and I have reported the issue here: https://bugs.chromium.org/p/chromium/issues/detail?id=1154243

Expected results:

The behaviour that I'm expecting is that in all of these cases, the size of the flex box matches its content.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Daniel Holbert [:dholbert] (vacation until Jun 23)]

Yeah, our calculation of width:min-content (and Chrome's as well) is based on some older spec text, which had said to just sum up the min-content sizes of all the flex items. (And their min-content sizes don't care about the fact that they have flex-shrink.)

The current spec text on this is https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes which says to backwards-engineer the flexbox algorithm (basically) in a way that would produce the behavior you're expecting.

This is tracked in bug 1055887. (note that the relevant section of the spec has changed a bit since that bug was filed)