CSS Diplay box and flex on Firefox

Question

I have a navbar in css that uses display: flex; and display: box; on parent and children (respectively). The first html element uses flex where:

• .menu-item has 1 part
• .submenu-items have 4 parts

The repartition is fixed.

Then the submenu use box and all are set to box-flex: 1; so that they can use the space they want.

The navbar renders corectly in Chrome, Safari and IE. But Firefox doesn't render it correctly.

How it's rendering in Chrome (and should in FF) :

How it's actually rendering in FF :

I have a Dabblet exemple of the bug.

Answer 1

Firefox needs display:flex; with eventually justify-content:space-around; for .dropdon-menu. It uses the new syntax . http://css-tricks.com/old-flexbox-and-new-flexbox/ dabblet updated : http://dabblet.com/gist/9468022

EDIT.

justify-content doesn't feed your needs , so look at flex properties.

You can simply set flex:1; to .submenu-item :

some explanations here : https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Result : http://dabblet.com/gist/9470629