为什么flexbox儿童的身高相同？

Question

我在Flex容器中有两个项目，我给第一个项目一个特定的高度，我希望其他高度适合它的实际内容。

因此代码非常简单：jsfiddle

＆＃13;

＆＃13;

.main {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  /* Safari 6.1+ */
  flex-flow: row nowrap;
}
.sub {
  border: 1px black solid;
  flex-grow: 1;
}
#sub1 {
  height: 300px;
  margin-right: 50px;
}

＆＃13;

<div class="main">
  <div class="sub" id="sub1">&nbsp;</div>
  <div class="sub" id="sub2">&nbsp;</div>
</div>

＆＃13;

＆＃13;

＆＃13;

正如你所看到的那样，当第一个div的高度增加时，第二个div被拉伸，所以如何防止这种情况，如何让没有高度规格的下一个孩子将其实际高度保持为实际内容

Answer 1

因为align-items的默认值为stretch。如果您希望它们在顶部对齐且无拉伸，请将其更改为flex-start。

.main {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}
.sub {
  border: 1px black solid;
  flex-grow: 1;
}
#sub1 {
  height: 300px;
  margin-right: 50px;
}

<div class="main">
  <div class="sub" id="sub1">&nbsp;</div>
  <div class="sub" id="sub2">&nbsp;</div>
</div>