Firefox and flexbox - When using white-space: nowrap on child element the flexible box breaks

Question

Take a look at this jsFiddle in Safari or Chrome, then in Firefox: http://jsfiddle.net/brandondurham/LRJhm/

What it looks like in Webkit: http://cloud.smallparade.com/B4TE

What it looks like in Firefox: http://cloud.smallparade.com/B53R

You'll see the flexible box is broken in Firefox. The longer of the two boxes (.left) has the css property white-space set to nowrap because, well, I don't want it to wrap. This single property is making the flexible box break and extend to fit the entire contents of the .left div.

Anyone else seen this behavior? Have a fix?

Answer 1

That's how it's supposed to work. Flexbox distributes the left over space after the intrinsic width of the elements has been calculated, it does not control the intrinsic width of the elements themselves. This is why the results are unintuitive if you don't set explicit widths on things, though the working group is reviewing the spec.

My advice would be to try using display: table; instead, though you may encounter some similar issues.

Answer 2

While I think the accepted answer by robertc is correct (in that is how box flex is supposed to work). You can disable the "intrinsic" width he talks about by setting that width of the box explicitly to 0. This way, only your specified distribution of the widths is taken into account.

This behaviour can be explained, because, when you set all the box widths to zero, then all of the width will become "remaining", thus the distribution depends completely on what you specify.

Answer 3

Set width: 0 on the element and that will become it's "preferred width", and will make non-wrapping text items inside the element behave correctly.

http://lists.w3.org/Archives/Public/www-style/2011Jan/0201.html