使用对齐项目：拉伸

与David Storey的回答类似，我的解决方法是：

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

请注意，高度：应从子组件中删除100%（请参见注释）。

或者，为了对齐项目，您可以仅在要拉伸的.flex-2-子项目上使用align self。

一个想法是显示：flex；弯曲方向：行；正在用.flex-1和.flex-2填充容器div，但这并不意味着.flex-2具有默认高度：100%；，即使它延伸到全高。

并且具有高度为100%的子元素（.flex-2-child）；，您需要将父对象设置为高度：100%；或使用显示器：flex；弯曲方向：行；在.flex-2分区上。

据我所知，display：flex不会将所有子元素的高度扩展到100%。

一个小演示，去掉了.flex-2-child的高度，并使用了display：flex；在flex-2上：http://jsfiddle.net/2ZDuE/3/

我在这里回答了一个类似的问题。

我知道你已经说过立场：绝对；虽然不方便，但它可以工作。有关修复调整大小问题的更多信息，请参见下文。

也可以看到这个jsFiddle演示，尽管我只添加了WebKit前缀，在Chrome中如此开放。

你基本上有两个问题，我将分别处理。

使弹性项的子项填充高度100%

设置位置：相对；在孩子的父母身上。设置位置：绝对；在孩子身上。然后可以根据需要设置宽度/高度（在我的示例中为100%）。

修复Chrome中的调整大小滚动“怪癖”

放置溢出-y：自动；在可滚动分区上。可滚动div必须指定显式高度。我的示例已经具有100%的高度，但如果尚未应用，则可以指定高度：0；

有关滚动问题的更多信息，请参阅此答案。

这也可以通过对齐自身来解决：拉伸；在我们想要拉伸的元素上。

有时，在Flexbox设置中只拉伸一个项目是可取的。

.容器{高度：200px；宽度：500px；显示：柔性；弯曲方向：行；}.flex-1型{宽度：100px；背景色：蓝色；}.flex-2型{位置：相对；挠曲：1；对齐自身：拉伸；背景色：红色；}.flex-2-儿童{背景色：绿色；}<div class=“container”><div class=“flex-1”></div><div class=“flex-2”><div class=“flex-2-child”></div></div></div>

如果我理解正确，您希望flex-2-child填充其父项的高度和宽度，以便红色区域被绿色完全覆盖？

如果是这样，您只需设置flex-2以使用Flexbox：

.flex-2 {
    display: flex;
}

然后告诉flex-2-child变得灵活：

.flex-2-child {
    flex: 1;
}

看见http://jsfiddle.net/2ZDuE/10/

原因是flex-2-child不是Flexbox项，但它的父项是。

我自己找到了解决办法。假设您有以下CSS：

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

在这种情况下，将高度设置为100%将不起作用，因此我将边距底部规则设置为自动，例如：

.child {
  margin-bottom: auto;
}

子对象将与父对象的最顶端对齐。

如果您愿意，也可以使用对齐自规则：

.child {
  align-self: flex-start;
}