nested CSS3 flexboxes not working

Question

Can flexboxes be nested? I have nested a horizontal flexbox in a horizontal flexbox, and a vertical flexbox in a vertical flexbox. Only the horizontal in horizontal works in chrome and neither work in firefox!

I have created a jsfiddle here: http://jsfiddle.net/NpkTL/1/

But here is the html:

<div id="A">
    <div id="A1">A1</div>
    <div id="A2">
        <div id="A2-container">
            <div id="A2a">A2a</div>
            <div id="A2b">A2b</div>
        </div>
    </div>
</div>
<div id="B">
    <div id="B1">B1</div>
    <div id="B2">
        <div id="B2-container">
            <div id="B2a">B2a</div>
            <div id="B2b">B2b</div>
        </div>
    </div>
</div>

​ and the CSS:

* {
    margin: 0;
    padding: 0;
    font-family: Arial;        
}

#A {
    position: absolute;
    top: 0px;
    left: 0px;
    background: black;
    width: 50%;
    height: 100%;

    display: -moz-box;
    display: -webkit-box;    
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
}

#A1 {
background: brown;
width: 100px;
height: 80%;   
}

#A2 {
background: orange;
height: 80%;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;    
}

#A2-container {
    display: -moz-box;
    display: -webkit-box;    
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    width: 100%;
    height: 100%;    
}

#A2a {
    background: red;
    height: 80%;   
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;    
}

#A2b {
    background: blue;
    width: 100px;
    height: 80%;
}

#B {
    position: absolute;
    top: 0px;
    right: 0px;
    background: gray;
    width: 50%;
    height: 100%;

    display: -moz-box;
    display: -webkit-box;    
    display: box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;

}

#B1 {
    background: brown;
    width: 80%;
    height: 100px;   
}

#B2 {
    background: orange;
    width: 80%;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;    
}

#B2-container {
    display: -moz-box;
    display: -webkit-box;    
    display: box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    width: 100%;
    height: 100%;    
}

#B2a {
    background: red;
    width: 80%;   
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;    
}

#B2b {
    background: blue;
    width: 80%;
    height: 100px;
}

​#A is on the left, #B is on the right. #A and #A2-container are vertical flexboxes and #B and #B2-container are horizontal flexboxes. I set colors for the different divs and shrank them at each level (width for vertical and height for vertical) to make it easier to see what's going on. It looks fine on the left (in chrome!), but on the right, #B2a should vertically fill #B2 (the orange one).

I realize that in this example it would be easier to use one flexbox with the flex in the middle row/column of 3, but I am dynamically loading the content into the equivalent of #A2, which happens to also be a flexbox.

Answer 1

Flexboxes can be nested but you have to get rid of your positioning. You mostly don't need it anymore anyway.

Now the problem that remains as of today is z-stacking flexboxes in my experience. And It is also not straight forward to position flexbox items on the main axis differently from each other (for instance if I have a row and I want to align one child item on the left and one other on the right, I will have to play with margins and so on which can become painful)

Also the results can be quite inconsistent depending on the different browsers.

By any means, I encourage you to use this : http://the-echoplex.net/flexyboxes/ It helps a lot.