ネストされたフレックスコンテナでフレックスラップが動作しない

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フレックスコンテナのバグかもしれません。シアンのボックスは縮小を拒否しているため、赤いボックスは折り返されません。

2番目の列、つまり.foo2または.foo3に幅を設定すると、項目が折り返されます。しかし、それはおそらくあなたが望むものではありません。

この場合、回避策の1つは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