Menu
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?
906
box-content to width:100%; will force that element to fill the space.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
The flex-wrap property is a sub-property of the Flexible Box Layout Module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines.
nowrap : Multiple whitespaces are collapsed into one, but the text doesn't wrap to the next line.
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.
57
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
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
