User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2251.0 Safari/537.36 Steps to reproduce: Nested flex item (also flex container itself) with flex-grow: 0 and a definite flex-basis: <length>. Reduced testcase: http://jsfiddle.net/Luxj17ez/ Actual results: The flex item streched to fit its child's width. Expected results: Its width should comply to the flex-basis rule since flex-grow is set to 0.
This is correct behavior, from a spec-change, and it's working as required by the spec. The relevant spec section is http://dev.w3.org/csswg/css3-flexbox/#min-size-auto Basically, by default, flex items have "min-width:auto", which is usually the min-content width (the width of the single 5cm-wide child, in your example). Though, if there's an explicit "width" or "max-width" set, and it's less than the min-content width, then "min-width:auto" resolves to that instead. (That's why the second part of your example works as you expect). This min-width:auto establishes the minimum size for the flex item, and if it has a smaller flex-basis value, it can't end up smaller than its min-width. To override this behavior, you can use "min-width:0". (or "max-width", if that makes more sense for your particular use-case, as you discovered in your jsfiddle.)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → INVALID
Here's an updated jsfiddle with "min-width:0" added to .flex-item, to disable the min-width:auto behavior: http://jsfiddle.net/Luxj17ez/1/
Thank you Daniel for your detailed and enlightening answer. I have added a comment on your related chromium's bug (https://code.google.com/p/chromium/issues/detail?id=426898) to hope for this behavior implemented in Blink.
You need to log in before you can comment on or make changes to this bug.