Mike Lambert Reporter
	Description • 9 years ago

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36

Steps to reproduce:

http://codepen.io/lambert-velir/pen/XbWMzw


Actual results:

The image is not respecting max-width: 100% in a flex container.


Expected results:

I would expect the image to shrink to fit inside the left panel.  Chrome/Safari/IE11 does this correctly and shrinks the image to fit (max-width: 100%)

	Boris Zbarsky [:bzbarsky]
	Comment 1 • 9 years ago

Mike, thank you for reporting this.

There was a recent (several months ago) spec change here; our rendering is correct per current spec.  Chrome has recently made this change as well (see <https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/44yUDgkjWXU/_UMd_R9DlNcJ>), and you should expect it in their future releases.

The change was that flex items default to "min-width: auto", which uses their intrinsic width.

If you want them to shrink below their intrinsic width, you want to style them with "win-width: 0" (the old default value of min-width).

	Daniel Holbert [:dholbert]
	Comment 2 • 9 years ago

(Here's a fixed codepen with "min-width: 0" on the flex item, which produces the layout you're expecting: http://codepen.io/anon/pen/EjxmWg )

	Boris Zbarsky [:bzbarsky]
	Comment 3 • 9 years ago

Though actually, it's possible this specific testcase will _not_ change behavior in Chrome, because the max-width style affects intrinsic width there. See also bug 823483.

Daniel, is that likely to become a big compat issue?  How often have you seen percentage max-width in the min-width:auto fallout?

	Daniel Holbert [:dholbert]
	Comment 4 • 9 years ago

Interesting -- yeah, if I tweak the original testcase to replace "max-width:100%" with "width:100%" (which we consider to influence the img's min-content size), then Firefox gives the expected rendering.

So, given that we & Chrome differ on whether max-width:100% influences the min-content size, then yes, I'd expect this will become a compat issue for scenarios like the one here. I'm not sure how big of one -- surely much smaller than "min-width:auto" itself has been. :)

I don't recall seeing percentage max-widths involved in other min-width:auto bugs; but once web developers start coding to Chrome-with-min-width:auto-support, we may start seeing more of those.