ネストされたCSS3フレックスボックスが動作しない

Question

フレックスボックスはネストできますか？私は、水平フレックスボックスに水平フレックスボックスを入れ、垂直フレックスボックスに垂直フレックスボックスを入れました。水平の水平のみがクロームで動作し、どちらもFirefoxで動作しません！

私はここにjsfiddleを作成しました：

<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> 

とCSS：http://jsfiddle.net/NpkTL/1/

しかし、ここではhtmlです

* { 
    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は左側にあり、 #Bは右側にあります。 #Aおよび＃A2-コンテナは垂直フレックスボックスであり、#Bおよび＃B2-コンテナは水平フレックスボックスです。色々なdivに色を設定し、それぞれのレベル（垂直の幅と垂直の高さ）で縮小して、何が起こっているのかをより簡単に確認できるようにしました。 （クロムの中で）左は上手く見えますが、右に＃B2aは＃B2（オレンジ色のもの）を縦に塗ります。

私はこの例では、3の中間行/列のフレックスでフレックスボックスを使用する方が簡単だが、＃A2に相当するものにコンテンツを動的にロードしています。フレックスボックス

Answer 1

Firefoxのフレックスボックスモデルはかなりバグが多いです。固定または絶対配置のボックスがあれば、それは壊れます。また幅を持たないとフレックスボックスがインラインボックスに戻されます。

Answer 2

フレックスボックスはネストすることができますが、ポジショニングを取り除かなければなりません。とにかくもうほとんど必要ありません。

今日、私の経験では、現在のままで問題が残っているのは、フレックスボックスをスタックすることです。 また、フレックスボックスアイテムを主軸上に配置するのも別の方法ではありません（たとえば、行があり、子アイテムを左と右に並べ替える場合は、余裕を持って遊んで苦しくなる可能性があります）

また、ブラウザによっては結果がかなり異なる可能性があります。

どのような手段であれ、私はこれを使用することをお勧めします：http://the-echoplex.net/flexyboxes/ 多くの助けになります。