중첩 된 CSS3 플렉스 박스가 작동하지 않음

Question

플렉스 박스를 중첩 할 수 있습니까? 나는 수평 플렉스 박스에 수평 플렉스 박스를, 그리고 수직 플렉스 박스에 플렉스 박스를 중첩했다. 수평의 수평 만 크롬에서 작동하며 파이어 폭스에서는 작동하지 않습니다!

내가 여기 jsfiddle 만들었습니다 http://jsfiddle.net/NpkTL/1/

을하지만, 여기에 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> 

와 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는 왼쪽에, #B가 오른쪽에 있습니다. #A 및 # A2- 컨테이너는 수직 플 렉 박스이며 #B 및 # B2- 컨테이너는 수평 플 렉 박스입니다. 나는 각기 다른 div의 색상을 설정하고 진행 상황을보다 쉽게 ​​볼 수 있도록 각 레벨 (세로 및 가로의 너비)에서 줄였습니다. 왼쪽에서는 괜찮 았지만 (크롬에서는!) 오른쪽에서 # B2a는 # B2 (오렌지색)로 수직으로 채워야합니다.

이 예제에서는 3 개의 가운데 행/열에있는 flex와 함께 하나의 flexbox를 사용하는 것이 더 쉬울 것이라고 생각하지만 동적으로 A2에 해당하는 내용을로드합니다. 플렉스 박스.

Answer 1

파이어 폭스의 플렉스 박스 모델은 현재 상당히 버그가 있습니다. 고정 또는 절대 위치 지정 상자가있는 경우 중단됩니다. 너비가 없어도 플렉스 박스를 인라인 박스로 되돌릴 수 있습니다.

Answer 2

플렉스 박스는 중첩 될 수 있지만 포지셔닝을 제거해야합니다. 어쨌든 대부분 더 이상 필요하지 않습니다.

오늘 현재로 남아있는 문제는 제 경험에서 플렉스 박스를 스태킹하는 것입니다. 그리고 플렉스 박스 아이템을 서로 다르게 배치하는 것도 어렵지 않습니다. (예를 들어 행이 있고 오른쪽에 하나의 하위 아이템을 정렬하고 싶습니다. 마진 등으로 놀면 고통 스러울 수 있습니다.)

또한 결과는 브라우저에 따라 다를 수 있습니다.

무엇이든이 내용을 사용하는 것이 좋습니다. http://the-echoplex.net/flexyboxes/ 많은 도움이됩니다.