在下面的代码和 jsfiddle 中，flexbox 比例随内容而变化。我感觉我不明白 flexbox 的真正目的。如果我们给予flex-grow我们想要的比例的属性，为什么盒子会随着内容而增长？
通知何时dataDiv其中有新的跨度内容，比例随内容而被破坏。您可以观察删除后的预期比例如何span inside 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>
The 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
