firefox v.37 nested squared flexboxes - css

Question

I made a flexbox layout with some squared flexboxes nested in the main layout flexboxes. It works fine in Chrome and IE but Firefox v37.02 won't make them squared or doesn't show them at all.
I would like the containers themselves to be flexboxes of the main layout, so I can rearrange them with media-queries and have the content flexboxes wrap in the available space.
Here is a 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 help is much appreciated.
Thank in advance!

Answer 1

You can use the flex-basis it is like the widht of the element but for flexboxes.
For example flex-basis: 50%;
and in the media query: flex-basis: 100%; (if flex-wrap is wrap the container will push the others down)
You should also start variable names not with numbers, you can put a '_'infront then it is fine
If you have problems with browser support just add this to be sure that it works in every browser
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;