Firefox and flexbox - When using white-space: nowrap on child element the flexible box breaks
سؤال
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?
المحلول
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.
نصائح أخرى
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.
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