geschachtelte CSS3-Flexboxen funktionieren nicht

Question

Können Flexboxes verschachtelt werden? Ich habe eine horizontale Flexbox in einer horizontalen Flexbox und eine vertikale Flexbox in einer vertikalen Flexbox verschachtelt. Nur die horizontale in horizontaler Richtung funktioniert in Chrome und beide funktionieren nicht im Firefox! http://jsfiddle.net/NpkTL/1/

Aber hier ist die 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> 

und die CSS:

ich jsfiddle hier geschaffen haben

* { 
    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 auf der linken Seite, #B ist auf der rechten Seite. #A und # A2-Container sind vertikale Flexboxen und # B und # B2-Container sind horizontale Flexboxen. Ich stelle Farben für die verschiedenen Divs ein und verkleinere sie auf jeder Ebene (Breite für Vertikal und Höhe für Vertikal), um besser sehen zu können, was vor sich geht. Es sieht links gut aus (in Chrom!), Aber auf der rechten Seite sollte # B2a vertikal # B2 (die orangefarbene) füllen.

Ich realisiere, dass es in diesem Beispiel einfacher wäre, eine Flexbox mit dem Flex in der mittleren Zeile/Spalte von 3 zu verwenden, aber ich lade den Inhalt dynamisch in das Äquivalent von # A2, das auch ein Flexbox.

Answer 1

Das Flexbox-Modell von Firefox ist gerade ziemlich fehlerhaft. Wenn Sie Boxen mit fester oder absoluter Positionierung haben, wird es brechen; Wenn Sie keine Breite haben, werden Ihre Flexboxen in Inline-Boxen umgewandelt.

Answer 2

Flexboxen können verschachtelt werden, aber Sie müssen Ihre Positionierung loswerden. Du brauchst es sowieso meistens nicht mehr.

Jetzt ist das Problem, das ab heute z-stacking flexboxes in meiner Erfahrung bleibt. Und es ist auch nicht einfach, flexbox Elemente auf der Hauptachse unterschiedlich voneinander zu positionieren (zum Beispiel, wenn ich eine Zeile habe und ich ein Kind Element auf der linken Seite und ein anderes auf der rechten Seite ausrichten will, muss ich spielen mit Rändern und so weiter, was schmerzhaft werden kann)

Auch die Ergebnisse können je nach den verschiedenen Browsern ziemlich inkonsistent sein.

Auf jeden Fall ermutige ich Sie, dies zu verwenden: http://the-echoplex.net/flexyboxes/ Es hilft sehr.