1807877 - Flexbox sizing incorrectly reported for icon with max-width

Status: RESOLVED DUPLICATE of bug 1801581

(Core :: Layout: Flexbox, defect)

Description

[Alan{H}]

Attachment: CleanShot 2022-12-28 at [e-mail]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:108.0) Gecko/20100101 Firefox/108.0

Steps to reproduce:

Test case and descriptions: https://codepen.io/alanhogan/pen/RwBabBZ

1. Put a flexbox inside a flexbox
2. Put an SVG within the inner flexbox
3. Size the inner SVG with max-width and max-height (not width or height)
4. EXPECTED: Good icon size. ACTUAL: 0x0
5. Try to fix it by using flex-shrink and flex-basis…

Actual results:

The icon is rendered at a good size but it takes up 0 layout space (bug!) in the inner flexbox

Expected results:

The icon layout should increase the size of the inner flexbox (with the flex-shrink/flex-basis fix applied). Without this fix, it should probably render the icon as 16x16 like other browsers do.

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

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=b6d4cc392199eac68b7641fe6ce2be73a84381f6&tochange=76c1fb5130dcd9f4562826d42194ebf74ca268c8

Comment 3

[Alan{H}]

More screen shots — I thought I would be able to upload these, but I guess not:

https://alanhogan.com/images/screenshots/correct%20rendering%20in%20chrome%20108.png
https://alanhogan.com/images/screenshots/Firefox%20buggy%20rendering%20with%20no%20fixes.png
https://alanhogan.com/images/screenshots/Firefox%20buggy%20rendering%20with%20overlapping%20elements%20using%20flex-basis.png
https://alanhogan.com/images/screenshots/Firefox%20patched%20rendering.png
https://alanhogan.com/images/screenshots/Inspector%20-%20Icon%20-%20Firefox%20buggy%20rendering%20with%20overlapping%20elements%20using%20flex-basis.png
https://alanhogan.com/images/screenshots/Inspector%20-%20Inner%20Flexbox%20-%20Firefox%20buggy%20rendering%20with%20overlapping%20elements%20using%20flex-basis.png

Comment 4

[Alan{H}]

Attachment: Firefox buggy rendering with overlapping elements using flex-basis.png

Comment 5

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

:TYLin, since you are the author of the regressor, bug 1340715, could you take a look? Also, could you set the severity field?

For more information, please visit auto_nag documentation.

Comment 6

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

The bug has a release status flag that shows some version of Firefox is affected, thus it will be considered confirmed.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Most likely a dupe of bug 1801581, but I'll let Ting-Yu confirm.

Comment 8

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Alan, thank you for reporting the bug with detailed testcase, workaround, and screenshot!

Like Emilio said in comment 7, this is fixed by bug 1801581. I test the codepen in comment 0 in Firefox Nightly 2023-01-04, and it works fine.

Comment 9

[Alan{H}]

Awesome, glad this is fixed!