防止弹性项目高度扩展以匹配其他弹性项目

Question

我在容器内有两个元素,它们通过使用弹性盒并排放置.在第二个元素(.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

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

/* 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 2

这是一个旧的解决方案. 我的回答被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>

Answer 3

您可以通过添加到父align-items: flex-start;来轻松解决这个问题。

就这样