cajas flexibles CSS3 anidadas que no funcionan

Question

¿Se pueden anidar las flexboxes? He anidado un flexbox horizontal en un flexbox horizontal y un flexbox vertical en un flexbox vertical. ¡Solo lo horizontal en horizontal funciona en cromo y tampoco funciona en Firefox!

He creado una jsFiddle aquí: http://jsfiddle.net/NpkTL/1/

Pero aquí es el 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> 

y el 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 está a la izquierda, #B está a la derecha. #A y # A2-container son flexboxes verticales y #B y # B2-container son flexboxes horizontales. Establecí colores para los diferentes divs y los reduje en cada nivel (ancho para vertical y alto para vertical) para que sea más fácil ver lo que está pasando. Se ve bien a la izquierda (en chrome!), Pero a la derecha, # B2a debe llenar verticalmente # B2 (el naranja).

Me doy cuenta de que en este ejemplo sería más fácil usar una flexbox con la flexión en la fila/columna central de 3, pero estoy cargando dinámicamente el contenido en el equivalente de # A2, que también es un Flexbox.

Answer 1

El modelo de cuadro flexible de Firefox es bastante defectuoso en este momento. Si tienes cuadros con posicionamiento fijo o absoluto, se romperá; tampoco tener un ancho revertirá sus flexboxes a cajas en línea.

Answer 2

Las cajas Flexibles se pueden anidar, pero debe deshacerse de su posición. En general, ya no lo necesitas más de todos modos.

Ahora, el problema que persiste hasta el día de hoy es z-apilamiento flexboxes en mi experiencia. Y tampoco es sencillo colocar los elementos de la caja flexible en el eje principal de forma diferente unos de otros (por ejemplo, si tengo una fila y quiero alinear un elemento infantil a la izquierda y otro a la derecha, tendré que jugar con los márgenes y lo que puede ser doloroso)

También los resultados pueden ser bastante inconsistentes dependiendo de los diferentes navegadores.

Por cualquier medio, lo animo a usar esto: http://the-echoplex.net/flexyboxes/ Ayuda mucho.