我在容器中有两个元素，它们通过使用弹性框并排。在第二个元素(.flexBox-2)上，我设置它在CSS中的高度。但是，第一个元素(.flexBox-1)将匹配.flexBox-2的高度。我如何停止.flexBox-1匹配.flexBox-2的高度，而只是保持其自然高度？
这是我到目前为止(也可用as a 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>
解决方法
This is an old solution.
My answer is superseded by this 07000. That is a better solution that does not rely on a CSS quirk.
只要flex容器本身没有高度，可以在第一个flex项目上设置height：0％。因为它没有高度从其父进程继承，所以任何百分比高度都会使其崩溃。然后会随着它的内容而增长。
例
在这个例子中，我删除了-webkit前缀。 It’s only really required for 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>
