1827028 - %width on image flex items makes automatic minimum size = 0

Status: RESOLVED DUPLICATE of bug 1700474

(Core :: Layout: Flexbox, defect)

Description

[dgrogan (chrome)]

Steps to reproduce:

Copying from https://jsfiddle.net/dgrogan/1352hwpL/4

<style>
.flex {
display: flex;
width: 100px;
border: 1px solid;
}

.item {
width: 100%;
flex: 0 0 10px;
background: orange;
}
</style>

<div class=flex>
<div class=item>
<div style="width: 50px; height: 100px;"></div>
</div>
</div>

<div class=flex>
<img src="https://place-hold.it/50x100" class=item>
</div>

Actual results:

Image got 10px width.

Expected results:

Image gets 50px width.

Automatic minimum sizing is the point here. For both of those cases, Chrome uses the following, but I can't figure out why Firefox seems to use an automatic minimum size of 0px for the image case.

specified size suggestion: 100px
content size suggestion: 50px
automatic minimum size is the minimum of the above: 50px

Is this behavior intentional or a gecko implementation bug?

This interop issue has come up recently in the wild on our bug tracker and stackoverflow.

Comment 1

[Daniel Holbert [:dholbert]]

Seems like probably a bug. I'm not sure why the percent would be magic here, given that it's applied against a definite value (the flex container's 100px width).

I can take a look here and get back to you. I know we've got a couple of related img-as-flex-item sizing bugs (some of which are related to spec-changes that we need to implement); it's possible this is a version of one of those.

Comment 2

[dgrogan (chrome)]

No worries. I have a test up for review that shows the differences. (I felt confident enough writing one based on your estimation agreeing with mine that it is probably a bug.) If we later determine FF behavior to be correct then I'll just change the test.

Comment 3

[dgrogan (chrome)]

Turns out we talked about this case at length 2 years ago in bug 1700474. My current take after re-reading:

• Firefox behavior matches today's spec ("This rule also applies when calculating a content-based automatic minimum size or its corresponding size contribution, yielding a definite “specified size suggestion")
• Spec authors prefer Chrome behavior (https://github.com/w3c/csswg-drafts/issues/5665#issuecomment-791673203 and fantasai's response)