CODEWITHSUNDEEP
cssfirefoxflexbox
Azrael
Azrael

Reputation: 701

CSS3 FlexBox Doesn't Display Correctly In Firefox 22

For some reason a project I'm working on in Firefox 22 won't display correctly. In works fine in webkit browsers (tested in Opera 15 and Chrome 27; Safari won't support the updated spec until 7.0). Everything is just grouped together in rows, so my first thought was to change flex-direction to column instead of row, but that didn't even help.

* {
margin:0;
padding:0;
}
body {
     background: none repeat scroll 0% 0% #ECF1E1;
     color: #FFFFFF;
     font-size: 100%;
     height: 100%;
     display: flex;
     display: -webkit-flex;
     width:100%;
     flex-flow: row wrap;
     -webkit-flex-flow: row wrap;
     overflow-x:hidden;
}
#content {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-radius: 5px 5px 5px 5px;
     border: 5px outset #FF6600;
     margin: 0% .25%;
     -webkit-flex:2;
     flex: 2;
     padding:0% 1.3%;
}
#login {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-radius: 5px;
     border: 5px outset #FF6600;
     flex:1;     
     -webkit-flex:1;
     padding:10px;
     margin: 0% .25%;   
}
footer#footer {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-top: 5px outset #FF6600;
     height: 50px;
     padding: 0% 1%;
     text-align:center;
     clear:both;
     width:100%;
     margin: 2% 0% 0% 0%;
}

Its supposed to be a 2 column layout (on desktops, anyway), but like I said everything is bunched together at the top of the page in Firefox 22 in a row.

Upvotes: 3

Views: 3211

Answers (2)

Frank Lämmer
Frank Lämmer

Reputation: 2325

The good news is that Mozilla has finally fixed it. It already works in the Firefox Nightly build 28.0a1. According to the rapid release calendar, FF28 will be shipping in March 2014.

Upvotes: 4

cimmanon
cimmanon

Reputation: 68319

Firefox does not support wrapping. To hide Flexbox from Firefox until the day that it does finally support wrapping, use a feature query:

@supports (flex-wrap: wrap) {
    body {
        display: flex;
    }
}

You only need to hide the display property, all of the other Flexbox properties will be ignored without it.

Upvotes: 7

Related Questions