non-uniform behavior of flexbox in firefox and chrome?

Question

I tried to use flexbox for the navigation bar as shown in the jsfiddle link below

http://jsfiddle.net/qq9pn/5/

it works like a charm under firefox -- as illustrated by the jsfiddle page, but in chrome the first icon sits at the center of the nav bar but the second icon is kicked out of the nav bar.

I'm aware that

-webkit-box-flex:1.0; /* Chrome */

and

-moz-box-flex:1.0; /* Firefox */

behaves different in the two browsers, but how can I enforce exactly the same behavior of flexbox in the two?

Answer 1

You're not using actual CSS flexbox in either Firefox or Chrome in that testcase. You're using XUL boxes in Firefox, and a very old and buggy "flexbox" draft in Chrome. They have totally different behavior from each other and from the current flexbox draft at http://dev.w3.org/csswg/css-flexbox/

I recommend not using -moz-box or -webkit-box, because they're basically very broken and will be removed, not fixed.