html – 防止弹性项目高度展开以匹配其他弹性项目

我在容器中有两个元素，它们通过使用弹性框并排。在第二个元素(.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>