flex item does not comply to flex-basis when child content is larger

RESOLVED INVALID

Status

()

Firefox
Untriaged
RESOLVED INVALID
3 years ago
3 years ago

People

(Reporter: Gilles Lepretre, Unassigned)

Tracking

(Blocks: 1 bug)

37 Branch
x86_64
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

3 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.
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: 1043520
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/

Comment 3

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