css - 我怎样才能让 Flexbox child 的高度达到他们 parent 的 100%？

Question

我正在尝试填充 Flexbox 中 flex 元素的垂直空间。

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

这是 JSFiddle

flex-2-child 没有填充所需的高度，除了以下两种情况:

1. flex-2 的高度为 100%(这很奇怪，因为 flex 元素默认为 100% + 在 Chrome 中有错误)
2. flex-2-child 有一个绝对位置，这也不方便

目前这在 Chrome 或 Firefox 中不起作用。

Answer 1

使用align-items: stretch

类似于 David Storey 的回答，我的解决方法是:

.flex-2 {
    display: flex;
    align-items: stretch;
}

请注意，height: 100% 应该从子组件中移除(见评论)。

除了 align-items，您还可以在要拉伸(stretch)的 .flex-2-child 元素上使用 align-self。