Html 如何防止弹性盒随着内容增长
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36182743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent a flex box from growing with content
提问by Ozum Safa
In the code and jsfiddle below, flexbox proportions changes with content. I am feeling I do not understand the real purpose of flexbox here. If we are giving flex-growproperties for the proportions we desire, why do the boxes grow with content?
在下面的代码和 jsfiddle 中，flexbox 的比例随着内容而变化。我觉得我不明白 flexbox 的真正目的。如果我们flex-grow为我们想要的比例赋予属性，为什么盒子会随着内容而增长？
Notice when dataDivhas new span content in it, proportions are broken with the content. You can observe how it is the expected proportions when you delete the spaninside dataDiv. Why does this occur?
请注意，当其中dataDiv有新的跨度内容时，内容的比例会被打破。当您删除spaninside时，您可以观察到它是如何预期的比例dataDiv。为什么会出现这种情况？
https://jsfiddle.net/4shaz5oy/
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>采纳答案by Ason
The flex-growdefines how the remaining space should be distributed amongst the flex items, not the items themselves.
在flex-grow定义了剩余的空间应该跻身柔性项目，而不是项目本身进行分配。
For their size you use flex-basis
对于您使用的尺寸 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>Based on comments, here is a simplified sample of how to keep size
根据评论，这里是如何保持大小的简化示例
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>回答by Stickers
It looks like everything works as expected, the problem is there is no space among yoyoyoyasdasdadsadasdasdasdasdasdasdasdadadathat focus the box to grow.
看起来一切都按预期进行，问题是yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada焦点框之间没有空间可以增长。
If you set .dataPanel {word-break: break-all;}you'll see the differences.
如果您设置，.dataPanel {word-break: break-all;}您会看到差异。
