Gilles Lepretre Reporter
	Description • 10 years ago

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.

	Daniel Holbert [:dholbert]
	Comment 1 • 10 years ago

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.)

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

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/

	Julien Sanchez
	Comment 3 • 10 years ago

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.