css - firefox v.37 nested squared flexboxes -

i made flexbox layout squared flexboxes nested in main layout flexboxes. works fine in chrome , ie firefox v37.02 won't make them squared or doesn't show them @ all.

i containers flexboxes of main layout, can rearrange them media-queries , have content flexboxes wrap in available space.

here fiddle example https://jsfiddle.net/sanmoll/jj591x8f/

<div class="main">     <div class="article">         <div class="itemxl"></div>         <div class="itemxl"></div>     </div>     <div class="aside">         <div class="iteml"></div>         <div class="iteml"></div>         <div class="iteml"></div>         <div class="iteml"></div>     </div> </div> <style>     .main {         display:flex;         width:100%;         height:100%;         background-color:#000;     }     .article {         /*  display: flex;*/         flex-wrap: wrap;         flex-direction: column;         width: 50%;         flex: 1;     }     .itemxl {         background-color: #f4f4f4;         width: 97%;         height:0;         margin-right: 3%;         margin-bottom: 3%;         padding-bottom: 97%;     }     .aside {         /*display: flex;*/         flex-wrap: wrap;         flex-direction: row;         width: 50%;     }     .iteml {         background-color: #f4f4f4;         width: 47%;         height:0%;         margin-right: 3%;         margin-bottom: 3%;         padding-bottom:47%;     } </style> 

any appreciated. thank in advance!

you can use flex-basis widht of element flexboxes.

for example flex-basis: 50%;

and in media query: flex-basis: 100%; (if flex-wrap wrap container push others down)

you should start variable names not numbers, can put '_'infront fine

if have problems browser support add sure works in every browser

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