为什么Flexbox的子元素具有相同的高度？

Question

我有一个弹性容器内包含两个项目，我给第一个项目设置了一个特定的高度，我希望另一个项目的高度适应其实际内容。

所以代码非常简单: jsfiddle

.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;
}

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

你可以看到第二个 div 随着第一个 div 高度的增加而拉伸，那么如何防止这种情况发生，如何使没有高度规定的下一个子元素保持其实际高度作为其实际内容

- Tarek.hms

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>

- Stickers

---

是的，就翻译这个，谢谢。 - Tarek.hms