Closed
Bug 1118274
Opened 10 years ago
Closed 10 years ago
flex item does not comply to flex-basis when child content is larger
Categories
(Firefox :: Untriaged, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: gilles.lepretre, Unassigned)
References
Details
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.
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.)
Blocks: minsizeauto-fallout
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → INVALID
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/
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.
You need to log in
before you can comment on or make changes to this bug.
Description
•