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

Firefox’s flex box model is pretty buggy right now. If you have any boxes with fixed or absolute positioning, it’ll break; also not having a width will revert your flexboxes to inline-boxes.