0

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?

nye17
  • 12,857
  • 11
  • 58
  • 68
  • 1
    Just curious, which version of Firefox are you testing in? I fiddled with the jsfiddle, and it looks ok. Does this version appear correctly for you? http://jsfiddle.net/qq9pn/6/ – Dalex Sep 28 '13 at 08:02
  • [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-box-flex) has this to say on the subject: "This property is a nonstandard extension. There was an old draft of the CSS3 Flexbox specification that defined a box-flex property, but that draft is over two years old and has since been superseded." I think a better approach would be to use other flex properties. – Mr Lister Sep 28 '13 at 09:29
  • possible duplicate of [Flexible box model - display : flex, box, flexbox?](http://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox) – cimmanon Sep 28 '13 at 13:03
  • @D.Alexander Thanks for catching the missing s, although that's not where the problem lies. It turns out the problem is caused by the table attributes I assigned to the table that encapsulates the nav bar. My bad. – nye17 Sep 29 '13 at 02:28

1 Answers1

3

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.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55