フレックス - 子供の親の幅を作る？

Question

私はフレックスボックスレイアウトを持っています。 .outer-2の幅を子の幅にして、.outer-1とouter-3の残りの部分を占めたいとします。

どうすればこの問題を解決できますか？

JSFiddle

.container { 
 
    display: flex; 
 
} 
 

 
.outer-1 { 
 
    background: red; 
 
    height: 100px; 
 
    flex: 1; 
 
} 
 

 
.outer-2 { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
.outer-3 { 
 
    background: blue; 
 
    height: 100px; 
 
    flex: 1; 
 
} 
 

 
.inner { 
 
    flex-basis: 30px; 
 
    background: green; 
 
    height: 100px; 
 
    margin: 0 3px; 
 
}

<div class="container"> 
 
    <div class="outer-1"> 
 
    </div> 
 
    <div class="outer-2"> 
 
    <div class="inner"> 
 
    </div> 
 
    <div class="inner"> 
 
    </div> 
 
    <div class="inner"> 
 
    </div> 
 
    </div> 
 
    <div class="outer-3"> 
 
    </div> 
 
</div>

Answer 1

あなたはその親に合わせて成長しているから、それを防ぐcontainerの第二子のためのフレックスプロパティを変更する必要があります。それで、各.inner要素に幅または分の幅を追加すると、親がそれらを折り畳まないようになります。

.container{ 
 
    display: flex; 
 
} 
 
.outer-1{ 
 
    background: red; 
 
    height: 100px; 
 
    flex: 1; 
 
} 
 
.outer-2{ 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.outer-3{ 
 
    background: blue; 
 
    height: 100px; 
 
    flex: 1; 
 
} 
 
.inner{ 
 
    width: 30px; 
 
    flex: 1 0 30px; 
 
    background: green; 
 
    height: 100px; 
 
    margin: 0 3px; 
 
}

<div class="container"> 
 
    <div class="outer-1"> 
 
    
 
    </div> 
 
    <div class="outer-2"> 
 
     <div class="inner"> 
 
    
 
     </div> 
 
     <div class="inner"> 
 
    
 
     </div> 
 
     <div class="inner"> 
 
    
 
     </div> 
 
    </div> 
 
    <div class="outer-3"> 
 
    
 
    </div> 
 
</div>