我在容器中有两个元素，它们通过使用flex box并排放置。在第二个元素（.flexbox-2）上，我在CSS中设置它的高度。但是，第一个元素（.flexbox-1）将与的高度匹配.flexbox-2。如何停止.flexbox-1匹配的高度.flexbox-2，而只保留其自然高度？
这是我到目前为止所拥有的（也可以作为jsFiddle使用）
.container {
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flexbox-1 {
-webkit-flex: 1;
border: solid 3px red;
}
.flexbox-2 {
-webkit-flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}<div class="container">
<div class="flexbox-1">.flexbox-1</div>
<div class="flexbox-2">.flexbox-2</div>
</div>这是一个旧的解决方案。我的答案已被Aaron使用的新答案
align-self所取代。这是一个不依赖CSS怪癖的更好的解决方案。
只要flex容器本身没有高度，就可以height: 0%在第一个flex项上进行设置。因为它没有从其父级继承的高度，所以任何百分比高度都会导致其崩溃。然后它将随其内容一起增长。
在此示例中，我删除了-webkit前缀。Safari仅真正需要它，并且可以在非前缀版本之上添加前缀。我也删除flex-direction: row了它，因为它是默认值。
.container {
display: flex;
}
.flexbox-1 {
flex: 1;
height: 0%;
border: solid 3px red;
}
.flexbox-2 {
flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}<div class="container">
<div class="flexbox-1">.flexbox-1</div>
<div class="flexbox-2">.flexbox-2</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句