1098165 - Flexbox items expand to children's content, disregarding sizes flex declarations

Status: RESOLVED DUPLICATE of bug 1086218

(Core :: Layout, defect)

Description

[Jakub Chodorowicz]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36

Steps to reproduce:

Installed Firefox Beta34


Actual results:

Flexbox layout is broken. Elements with flex declarations flex: 0 0 33% should always have 33% width.

Sample code
http://codepen.io/chodorowicz/pen/RNwPVG?editors=110


Expected results:

Flex children should have 33% width, whatever content width is.

Comment 1

[:Gijs (he/him)]

This reproduces on current Nightly as well, but I don't know if this is another spec change thing or not.

Comment 2

[Jakub Chodorowicz]

The only change in spec and syntax (in FF 34) is default value for flex-basis. Which is now "main-size" instead of "auto", which shouldn't influence this test case.

https://developer.mozilla.org/en-US/Firefox/Releases/34

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Jakub Chodorowicz from comment #0)
> Flexbox layout is broken. Elements with flex declarations flex: 0 0 33%
> should always have 33% width.
[...]
> Flex children should have 33% width, whatever content width is.

...unless that violates their min-width property. Particular, their "implied minimum width" (the default min-width on a flex item), which defaults to the min-content size:
   http://dev.w3.org/csswg/css-flexbox/#min-size-auto

(In reply to Jakub Chodorowicz from comment #2)
> The only change in spec and syntax (in FF 34) is default value for
> flex-basis. Which is now "main-size" instead of "auto"

There's also this "min-width:auto" / implied minimum width thing. :) (bug 1015474)

You can disable this behavior by putting "min-width:0" on your flex items. (or by setting a suitable "max-width", or by using "width:33%" instead of "flex-basis:33%" and using flex-basis:main-size -- which triggers a special-case in the spec that caps the implied minimum width.)

Duping to an earlier bug w/ implied minimum size causing overflow.

Comment 4

[Daniel Holbert [:dholbert]]

(FWIW: the other big change -- "flex-basis:main-size" -- has been backed out for Firefox 34, due to concerns that the spec might change again on that point.

So, when I said '"width:33%" ... and flex-basis:main-size' as one of the workarounds in comment 3, I should've said 'flex-basis:auto', for firefox 34 at least. That may not be future-proof, though, because of the main-size rename, so I probably wouldn't recommend that workaround at this point.)

Comment 5

[Jakub Chodorowicz]

OK, all clear, thanks Daniel!