防止flex项高度展开以与其他flex项匹配

Question

我在一个容器中有两个元素，它们是通过使用flex框并行的.在第二个元素(.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>

​

Answer 1

，这是一个旧的解决方案。，我的答案被align-self取代了。这是一个更好的解决方案，不依赖于CSS怪癖。

只要flex容器本身没有高度()，就可以在第一个flex项上设置height: 0%。由于它没有要从其父节点继承的高度，任何百分比高度都会导致其崩溃。然后，它将随着它的内容而增长。

示例

在本例中，我删除了-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>

​

Answer 2

我知道这是一个老问题，但更好的解决方案是使用flex-start将flex项设置为与顶部对齐。

​

/* Default Styles */
.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
 .flexbox-1 {
  flex: 1;  
  align-self: flex-start;  
  border: solid 3px red;
}

<div class="container">
  <div class="flexbox-1">"align-self: flex-start;"</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

​

Answer 3

您可以很容易地通过添加到父对齐项来解决这个问题: flex-start;

就这样