I am facing an issue with my layout setup in different browsers. When I have a list of divs inside a flex div, it displays correctly in Chrome:
However, in Firefox, it only shows a horizontal scroll with one line.
Is there a way to prevent the forced horizontal scroll in Firefox and make it display like it does 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;
}