중첩 된 플렉스 컨테이너에서 플렉스 랩이 작동하지 않습니다.

Question

시안 상자가 플렉스 랩으로 설정되어 있기 때문에이 예제에서 화면 너비가 작은 경우 파란색 상자와 빨간색 상자가 줄 바꿈 될 것으로 예상됩니다.

그러나 그런 일은 일어나지 않습니다. 왜 이것이 작동하지 않습니까?

.foo, 
 
.foo1, 
 
.foo3 { 
 
    color: #333; 
 
    text-align: center; 
 
    padding: 1em; 
 
    background: #ffea61; 
 
    box-shadow: 0 0 0.5em #999; 
 
    display: flex; 
 
} 
 

 
.foo1 { 
 
    background: green; 
 
    width: 200px; 
 
    flex: 1 1 100%; 
 
} 
 

 
.foo2 { 
 
    background: pink; 
 
    display: flex; 
 
    padding: 10px; 
 
} 
 

 
.foo3 { 
 
    background: cyan; 
 
    flex-wrap: wrap; 
 
} 
 

 
.bar1, 
 
.bar2 { 
 
    background: blue; 
 
    width: 50px; 
 
    height: 30px; 
 
} 
 

 
.bar2 { 
 
    background: red; 
 
} 
 

 
.column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    background: orange; 
 
    height: 150px; 
 
}

<div class="column"> 
 
    <div class="foo1"></div> 
 
    <div class="foo"> 
 
    <div class="foo2"> 
 
     <div class="foo3"> 
 
     <div class="bar1"></div> 
 
     <div class="bar2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="foo1"></div> 
 
</div>

다음 링크에서 자세한 내용을 참조하십시오 : http://codepen.io/anon/pen/vxExjL

Answer 1

이것은 column wrap 플렉스 컨테이너 버그가 여기

는 코드입니다. 청록색 상자가 축소되지 않으므로 빨간색 상자가 줄 바꿈되지 않습니다.

너비를 두 번째 열 또는 .foo2 또는 .foo3으로 설정하면 항목이 줄 바꿈됩니다. 그러나 그것은 아마도 당신이 원하는 것이 아닙니다.

한 가지 해결 방법은이 경우 column wrap을 사용하지 않는 것입니다. row nowrap 스틱 : 귀하의 답변에 대한

.column { 
 
    display: flex; 
 
    background: orange; 
 
    height: 150px; 
 
} 
 

 
.foo, 
 
.foo1, 
 
.foo3 { 
 
    display: flex; 
 
    justify-content: center; 
 
    color: #333; 
 
    text-align: center; 
 
    padding: 1em; 
 
    background: #ffea61; 
 
    box-shadow: 0 0 0.5em #999; 
 
} 
 

 
.foo { 
 
    flex: 1; 
 
} 
 

 
.foo1 { 
 
    flex: 0 0 200px; 
 
    background: green; 
 
} 
 

 
.foo2 { 
 
    display: flex; 
 
    background: pink; 
 
    padding: 10px; 
 
} 
 

 
.foo3 { 
 
    flex-wrap: wrap; 
 
    margin: 0 auto; 
 
    background: cyan; 
 
} 
 

 
.bar1, 
 
.bar2 { 
 
    background: blue; 
 
    width: 50px; 
 
    height: 30px; 
 
} 
 

 
.bar2 { 
 
    background: red; 
 
}

<div class="column"> 
 
    <div class="foo1"></div> 
 
    <div class="foo"> 
 
    <div class="foo2"> 
 
     <div class="foo3"> 
 
     <div class="bar1"></div> 
 
     <div class="bar2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="foo1"></div> 
 
</div>

revised codepen