user3436640
user3436640

Reputation: 41

Flex items not wrapping in Firefox

I have a list of divs inside a flex div like this with Chrome:

enter image description here

But in Firefox it does horizontal scroll only with one line

enter image description here

What can I do to don't force the horizontal scroll? I want it in Firefox like in Chrome

#maindiv{
    margin: auto;
    width: 97%;
    border: 1px solid #F4F4F4;
    border-radius: 2px;
    margin-top: 10px;
    -webkit-justify-content: space-around;
    -webkit-flex-wrap: wrap;
    -moz-justify-content: space-around;
    -moz-flex-wrap: wrap;
    -ms-justify-content: space-around;
    -ms-flex-wrap: wrap;
    justify-content: space-around;
    flex-wrap: wrap;
    display: -webkit-flex;
    display: flex;
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    height: 395px;
    max-height: 395px;
    overflow-y: scroll;
}

#divslist{
    list-style: none;
    margin: 0px;
    float: left;
    position: relative;
    zoom: 1;
    -webkit-justify-content: space-around;
    -webkit-flex-wrap: wrap;
    -moz-justify-content: space-around;
    -moz-flex-wrap: wrap;
    -ms-justify-content: space-around;
    -ms-flex-wrap: wrap;
    justify-content: space-around;
    flex-wrap: wrap;
    display: -webkit-flex;
    display: flex;
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: end;
}

Upvotes: 4

Views: 1347

Answers (1)

Shiva
Shiva

Reputation: 6887

just changed the order in css from

display: -webkit-flex;
display: flex;
display: -moz-box;

To

display: -webkit-flex;
display: -moz-box;
display: flex;

and its working in FF 28.check this fiddle in FF and chrome

Upvotes: 2

Related Questions