フレックスボックスを使用して2つのアイテムを収納できるまでの幅を埋めてください

Question

私は2つの「セル」を並べて、並べて置くことができます。

ビューポートがセルを横に並べて表示できるようになるまで、ビューポートが広がるにつれてセルの幅が100％になるようにします。

ビューポートが両方のセルを収容できるだけの幅を持っている場合は、それらを並べて表示することをお勧めします。

ビューポートがさらに広く引き伸ばされているときは、左側のセルが最大幅のままにしておきたいと思います。右のセルを拡大して幅の残りの部分を埋めるようにしたいと思います。

フレックスボックスでこれを行うことはできますか？

次はほとんど機能し、離れて次のような問題から：コンテナが800ピクセル以上になると

• 右側のセルは、セルが均等にする場合、100％の幅を占有しない幅
• に成長して停止しますそれらはお互い（AFAICT）の上に積層され

* { 
 
    box-shadow: 0 0 0 1px black inset; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.cell1 { 
 
    min-width: 400px; 
 
} 
 

 
.cell2 { 
 
    min-width: 400px 
 
    width: /* 100% until the viewport is 800px or more, at which point it should start stretching to fill */ 
 
}

<div class="container"> 
 
    <div class="cell1">contents of cell 1</div> 
 
    <div class="cell2">contents of cell 2</div> 
 
</div>

Answer 1

Flexboxだけではできません。メディアクエリが必要です。

​​

スタックは

* { 
 
    box-shadow: 0 0 0 1px black inset; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.cell1 { 
 
    flex-basis: 100%; 
 
} 
 
.cell2 { 
 
    flex-grow: 1; 
 
} 
 

 
@media (min-width: 800px) { 
 
    .cell1 { 
 
    max-width: 400px; 
 
    } 
 
}

<div class="container"> 
 
    <div class="cell1">contents of cell 1</div> 
 
    <div class="cell2">contents of cell 2</div> 
 
</div>

スニペット