Flexbox shrinking height of images
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
People
(Reporter: neil.kronlage, Unassigned)
Details
Attachments
(2 files)
expected.jpg
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0
Steps to reproduce:
Open:
This example has some images in a flex box with a few different configurations.
FireFox's rendering does not match the rendering produced by Safari, Chrome, and Edge (which are all the same). I'm assuming there is a bug with FireFox since the others all match, but I don't know the spec well enough to say if FireFox is doing the correct thing and the others are wrong.
Actual results:
The height of the div containing the images shrinks to smaller than the initial height of the images.
Expected results:
The height of the div should match the natural height of the images.
|
Reporter | |
Comment 1•5 years ago
|
||
|
||
Updated•5 years ago
|
|
||
Comment 2•5 years ago
|
||
(In reply to neil.kronlage from comment #0)
FireFox's rendering does not match the rendering produced by Safari, Chrome, and Edge (which are all the same).
Actually, I see a different output for Edge (version 18).
Edge matches Chrome and Safari on the first two rows (for class initial and auto), and they match Firefox on the third row (for class zero).
|
|
||
Comment 3•5 years ago
•
|
||
But for the first two rows, I believe Firefox is indeed wrong -- we match an older version of the spec on this particular behavior, and bug 1136312 is filed on updating to match the newer spec text.
In particular, min-width:auto (the initial value of min-width) used to ignore the content size for flex items with an intrinsic aspect ratio. But now it does consider the content size for those items. If you work around this by manually specifying a larger min-width, e.g. min-width:170px, then you'll see that we do end up producing your expected height as well. This is only an issue with us resolving the min-height.
As for the Chrome/Safari rendering of the third row (the row with explicit min-height:0) -- as noted in comment 2, Edge and Firefox independently agree on the rendering there (whereas Chrome/Safari share much of their flexbox layout implementation + likely share bugs/quirks), so I'm inclined to believe that the Chrome/Safari rendering there is a bug. In fact, I think it's this bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=721123
Description
•