Which browser is right concerning css3 flex-box?


After experimenting with the css3 flex-box proporty, I quickly noticed some differences in Chrome and Firefox.

In particular: if you set a width on an element that should be flex, firefox will flex the element according to what it needs, it takes the width style into account but its only a variable.

Chrome will respect the with style fully,

An example:

<div id="box">
<div class="flex-box">Test</div>
<div class="flex-box">Test Text</div>

If the 2 divs inside the box have the same width assigned, chrome will make them the same size. Firefox will reconize that the second div needs more space, and thus it gets more allocated.

who is right?

Problem courtesy of: Johan


Remember the flex doesn’t apply to the width, it applies to the free space after the minimum intrinsic width has been determined. This produces counter-intuitive results in several common cases, as has been pointed out on the www-style mailing list. I’ve found that, unless you want the CSS re-ordering or the multi-line (which isn’t yet implemented in Firefox and Chrome), what you think you want to use display: box and box-flex for you really want to use display: table and display: table-cell.

But back to your actual question: I found Firefox and Chrome display identically if you set a width in pixels, but not if you set a width as a percentage. As far as which browser is doing it correctly at the moment, it’s a fair bet Firefox is implementing what the spec originally intended as the original spec is describing what the XUL property does, and the XUL property is what this is all based on. As others have mentioned, whether or not the final spec ends up matching this original intention is unknown.

Solution courtesy of: robertc

View additional discussion.