1465308 - flexbox not working with max-height img

Status: RESOLVED INVALID

(Core :: Layout, defect, P3)

Description

[junkwarnick]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180516032328

Steps to reproduce:

creat a flexbox column with two elements inside. inside of the one with flex:1; place an image

https://codepen.io/warnick/full/QxWzbb/


Actual results:

The image should shrink to the size of the parent.


Expected results:

The image stays at its native resolution.

Comment 1

[Daniel_A[:daschilean] [Please contact - [e-mail]]]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:60.0) Gecko/20100101 Firefox/60.0 
Build ID: 20180516032328 
I manage to reproduce this issue on Mac 10.12 x64 with the latest FF 60.0.1(64bit). Please note that this issue is also displayed on Windows 10 x64 and Ubuntu 18.04 x64.

Comment 2

[Daniel Holbert [:dholbert]]

Microsoft Edge matches Firefox here, FWIW. (I tested their current version 17 as well as the "Insider Preview" available on BrowserStack)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (from reporter)

Comment 4

[Daniel Holbert [:dholbert]]

I get the author's expected rendering if I add "min-height:0" to the box-1 CSS rule.  Here's a codepen with that change: https://codepen.io/dholbert/pen/aKNvLP

Without that change .box-1 (which is a flex item) gets an "automatic minimum size"[1] when being sized by its parent flex container, which in this case is the height of its image descendant.  So it refuses to take on any size that is smaller than that image's intrinsic height (and that clamping happens before its image-descendant ever gets a chance to apply its max-height:100% -- so that max-height doesn't get a chance to make a difference, because the size that it resolves against is always something large).

I think Chrome's behavior here is wrong (they basically behave as if they already had that min-height:0 styling applied), and this is tracked in their bug tracker as [2].

[1] https://drafts.csswg.org/css-flexbox/#min-size-auto
[2] https://bugs.chromium.org/p/chromium/issues/detail?id=596743