1911472 - Container Takes Original Width Of Image

Status: RESOLVED DUPLICATE of bug 1742042

(Core :: Layout: Flexbox, defect)

Description

[klausgy]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Steps to reproduce:

I ran the following fiddle: https://jsfiddle.net/avbqdw03/13/

Alternatively, this code:

<div>
  <span>
    <img src="https://placehold.co/600x400">
  </span>
</div>

div {
  position: fixed;
  height: 50px;
  display: flex;
  background: red;
}
img {
  height: 100%;
}

Actual results:

The div container takes on the 600px original width of the image, although the image is scaled down to 50px height.

Expected results:

Other browsers render the div in the same size as the image, i.e. you see no red background. I don't know what the spec says, but people on Reddit suggested I should file a bug nontheless.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

This seems to be specific to the use of display: flex on the div, so moving to the Flexbox component.

Comment 3

[Jonathan Kew [:jfkthame]]

Ugh, I must've inadvertently touched that security flag.... clearing it.

Comment 4

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Standalone testcase from the reporter

Thanks for reporting. Made a standalone testcase based on the jsfiddle in comment 0.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

It looks like when computing the intrinsic size of the flex item, Firefox is not consider the percentage basis of the flex container. Bug 1909761 might help fixing this bug.

Comment 6

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

After debugging the testcase, I discovered that this bug is similar to bug 1742042. We'll need to apply the stretched cross-size when computing the flex item's intrinsic size.

The workaround for the testcase is to add height:100% on the flex item.

Comment 7

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

This is fixed by bug 1742042.