Which browser is right concerning css3 flex-box?

Question

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>
</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?

Answer 1

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.

Answer 2

I don't think any browser is right or wrong as flexbox is still a working draft. At any time the spec could change and render another browser right or wrong.

http://www.w3.org/TR/css3-flexbox/

Answer 3

I disagree with robertc's statement "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."

I am currently using the flexbox in an attempt to show how simple it is to convert a rather heavy in JS and CSS site to a very simple HTML/CSS3 site. Once conclusion I have come to with regards to setting width in pixels:

#main {
  display: box;
}

#main > section {
  width: 120px;
  padding: 10px;
  border: 5px solid #000;
}

In chrome, the total width = 120 + 20 + 10 = 150px In ff, total width = 120px (the 20px padding are inside the 120 and the 10px border is as well)

Another inconsistency I found, in chrome, #main IS greedy and takes up 100%, as you would likely expect. In Firefox, you need to set with to 100% on #main in order for it to act as you would expect.

I'm still working on ironing out all differences in all supported browsers, I will try to post when I have more to add to this. Sadly, as cool as he flexbox model is, and as easy as it makes a lot of shit, its far from consistent.

One more thing, using CSS transitions to change dimensions works well with explicitely defined dimensions (ie. pixels)... but if the dimension is defined by the box's flex, the animation simply jumps between the flex values... no where near as smooth (though, instead of heaving flex of 5 and 1, you could have flex of 500 and 100). In fact, chrome will not animate between flex values, just jumps. FF on the other hand does this nicely.

I'm just really hoping things progress to the way FF handles flexbox, while chrome is close, I just don't agree with how some things are handled, and the lack of animation between flex values just plain sucks.