1154758 - Canvas in Flexbox doesn't properly use `max-width`

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[madlittlemods]

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36

Steps to reproduce:

jsFiddle Demo: http://jsfiddle.net/MadLittleMods/dzxam2tm/2/

Make a flexbox with two items with `flex: 1;` in it which should make them all equal widths. Put a canvas inside on of the items with `max-width: 100%;`

img, canvas, svg {
    max-width: 100%;
    max-height: 100%;
}


Actual results:

The flexbox item with the canvas is sized way bigger than the other one and is not equal to the widths of the other items as expected.


Expected results:

Each flexbox item is equal width and the canvas is sized down proportionally to the flexbox item width.

Comment 1

[madlittlemods]

The demo/setup works as expected in Chrome and IE10+.

Comment 2

[Boris Zbarsky [:bzbarsky]]

You need to set the min-width to 0 on the flex item.  The default value is "auto", which maps to the intrinsic width in this case.

> The demo/setup works as expected in Chrome and IE10+.

It's going to stop working in them once they update to the current flexbox spec.  That patch landed in Chrome development builds yesterday, for what it's worth.  See https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/44yUDgkjWXU