フレックスの子ラッピングを停止する

Question

私はフレックスコンテナを持っていて、その子はラッピングしていますが、両方を100％幅のままにしておきたい - どうすればいいですか？

.flexbox { 
 
    display: flex; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-shrink: 0; 
 
    display: block; 
 
}

<div class="flexbox"> 
 
    <div class="container">sadasd</div> 
 
    <div class="container">adasdsad</div> 
 
</div>

https://jsfiddle.net/shx2yheg/

Answer 1

ので、あなたはそれを変更する必要はありませんあなただけのフレックス子要素にflex: 0 0 100%を設定する必要があるとflex-wrapの初期値はnowrapです。

.flexbox { 
 
    display: flex; 
 
    align-items: center; 
 
    width: 200px; 
 
    border: 2px solid red; 
 
} 
 

 
.container { 
 
    flex: 0 0 100%; 
 
    border: blue 1px solid; 
 
}

<div class="flexbox"> 
 
    <div class="container">sadasd</div> 
 
    <div class="container">adasdsad</div> 
 
</div>

Answer 2

あなたはまず、この

.flexbox { 
    display: flex; 
    align-items: center; 
    flex-flow: column; 
    width:100%; 
    height:100vh; 
} 

.container { 
    display: flex; 
}