フレックスボックスがコンテンツと共に成長するのを防ぐ方法

Question

以下のコードおよびフレックスボックスの比率は、内容によって変化します。私はここでフレックスボックスの本当の目的を理解していないと感じています。私たちが望む比率のプロパティーをflex-growに与えているのであれば、なぜボックスはコンテンツとともに成長するのでしょうか？

注意：dataDivに新しいスパンの内容が含まれている場合、その内容で割合が崩れます。 dataDivの中でspanを削除すると、予想される割合がどのようになっているか観察できます。なぜこれが起こるのですか？

https://jsfiddle.net/4shaz5oy/

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    height: 100vh; 
 
} 
 
.mapBox { 
 
    flex: 2; 
 
    background-color: red; 
 
} 
 
.controlBox { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
} 
 
.controlPanel { 
 
    flex: 1; 
 
    max-height: 33%; 
 
    background-color: yellow; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 
.dataPanel { 
 
    flex: 2; 
 
    max-height: 66%; 
 
    background-color: blue; 
 
    padding: 5px; 
 
}

<div class="container"> 
 
    <div class="mapBox"></div> 
 
    <div class="controlBox"> 
 
    <div class="controlPanel"> 
 
     <div class="buttonDiv"></div> 
 
     <div class="buttonDiv"></div> 
 
     <div class="buttonDiv"></div> 
 
    </div> 
 
    <div class="dataPanel"> 
 
     <div class="dataDiv"> 
 
     <span>yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

flex-growは、残りのスペースは、フレックスアイテムではなく、アイテム自体の間で分配されるべき方法を定義します。その大きさのために

あなたは、ここではサイズに保つ方法の単純化されたサンプルがあるコメントに基づいてflex-basis

html, body { 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    height: 100vh; 
 
} 
 

 
.mapBox { 
 
    flex: 2; 
 
    flex-basis: 66%; 
 
    background-color: red; 
 
} 
 

 
.controlBox { 
 
    flex: 1; 
 
    flex-basis: 33%; 
 
    display: flex; 
 
    flex-direction:column; 
 
    background-color:green; 
 
} 
 

 
.controlPanel { 
 
    flex: 1; 
 
    max-height: 33%; 
 
    background-color: yellow; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 

 
.dataPanel { 
 
    flex: 2; 
 
    max-height: 66%; 
 
    background-color: blue; 
 
    padding: 5px; 
 
}

<div class="container"> 
 
    <div class="mapBox"> 
 

 
    </div> 
 

 
    <div class="controlBox"> 
 
    <div class="controlPanel"> 
 
     <div class="buttonDiv"> 
 

 
     </div> 
 
     <div class="buttonDiv"> 
 

 
     </div> 
 
     <div class="buttonDiv"> 
 

 
     </div> 
 
    </div> 
 

 
    <div class="dataPanel"> 
 
     <div class="dataDiv"> 
 
     <span>yoyoyoy as da sd ad sa da sd as da sd as da sd as da sd ad ada</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

---

使用

html, body{ 
 
    margin: 0; 
 
} 
 
.flex, .left, .right { 
 
    display: flex; 
 
} 
 
.left, .right { 
 
    flex: 1; 
 
    flex-direction: column; 
 
} 
 
.left { 
 
    background: red; 
 
    flex-basis: 66.66%; 
 
} 
 
.right { 
 
    flex-basis: 33.33%; 
 
} 
 
.item1 { 
 
    background: yellow; 
 
    overflow: auto; 
 
    height: 33.33vh; 
 
} 
 
.item2 { 
 
    background: lightblue; 
 
}

<div class="flex"> 
 
    <div class="left"> 
 
    Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 <br> 
 
    Bla 0<br> 
 
    Bla 0<br> 
 
    Bla 0<br> 
 
    Bla 0<br> 
 

 
    </div> 
 
    <div class="right"> 
 
    <div class="item1"> 
 
     Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 <br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 

 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 

 
    </div> 
 
    <div class="item2"> 
 
     Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 <br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 

 
     Bla 2<br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 

 
     Bla 2<br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 
     Bla 2<br> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

期待通りに動作しているようですが、の間には、ボックスが成長するためのスペースがありません。

.dataPanel {word-break: break-all;}を設定すると、その違いが表示されます。