Flex box wrap not working Firefox

I have page that I am using flex to wrap some div elements depending on the width of the browser. It is working fine on ID >= 10 and Chrome. Most of the flex stuff works on Firefox except for flex-flow:row wrap. Not sure what I am doing wrong?
This is the flex wrapper css

.topnav {
display: flex;
display: -moz-box;
flex-flow: row wrap ;
flex-direction: row;
-moz-box-pack: center;
-webkit-flex-direction: row;
justify-content: center ;
-webkit-justify-content: center;
-moz-justify-content: center;
width: 100%;
border: none;

Here is the inner box css
/border: solid thin papayawhip;/
margin: 2px;
background-color: white;
border: solid thin black;
width: 240px;
justify-content: center;
-moz-justify-content: center;


I have use Firebug to inspect the styles and wrap is there but does nothing.


Watch the ordering of your pre-fixes. The ones without the pre-fix should be last.Eg, display:flex and justify-content: center` should be the last in the list, otherwise they get overwritten by the pre-fixes.

As Sam said the ‘display: -moz-box;’ is the culprit and over-rides the ‘display:flex’. If you change the order around it should work in Firefox.

This is one of the problems with pre-fixes in that you can get discrepancies between earlier versions of the rule if you are not careful. I think you can drop the moz-box anyway as that is Firefox 19 and a few years old now.

yes you can try this over-rides the ‘display:flex’

That fixed it, thanks everyone. Amazing how much time can be wasted on a simple problem like that.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.