1888262 - Flex Items containing image or canvas do not scale width properly when image size is set with % units

Status: NEW

(Core :: Layout: Flexbox, defect)

Description

[bdyer733]

Attachment: ff-flex-item-img-width-bug.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

Steps to reproduce:

Created a flex div with a fixed height, added a div inside of it then added an image inside of it with height set to 100%. width:max-content/fit-content does not change the results. In some situations height:inherit works but not in others( I don't have a simplified version for this )

Actual results:

The flex item div's width was computed as the natural width of the image instead of the calculated width.

Expected results:

The flex-item div size should match the image's final size.

Comment 1

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

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

Comment 2

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

Attachment: Testcase 1 (add red border to the flex item)

Adjust the reporter's testcase so that it is easier to see the bug.

Comment 3

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

Unfortunately, bug 1926015 doesn't address this bug.

In Testcase 1, the flex item has a stretched height, which should affect its intrinsic inline size if it has descendants with an aspect ratio. My intuition for the fix is that we can move the cross-size pre-stretch to a position before creating ReflowInput. This way, the flex base size will take the stretched cross-size (height) into consideration when we create ReflowInput to compute various sizes for the item.

Comment 4

[Chris Peterson [:cpeterson]]

Attachment: Firefox_Safari_Chrome_screenshot.png

(In reply to Ting-Yu Lin [:TYLin] (PST, UTC-8) from comment #2)

Created attachment 9394339 [details]
Testcase 1 (add red border to the flex item)

FWIW, I see that Firefox 133, Safari 18.1.1, and Chrome 131 on macOS 15.1.1 all render Testcase 1's red border differently.