如何使列 flex 具有高度：100%？

Question

我想让以下内容垂直填充视口：

http://codepen.io/anon/pen/lkpKu

但是，只要有display: flex，将height: 100% 应用于外部div 就不起作用。

这是来自：

http://codepen.io/chriscoyier/pen/qazmI

水平填充视口没有问题。

有什么方法可以做到这一点？我愿意看到黑客，但理想情况下，这不需要我，例如使用 Javascript 手动实现相同的效果（我知道该怎么做，我不问）。

我只是想让它在最新的 Chrome 上运行。

Answer 1

只需将 100% 的高度添加到 html 和 body 标记。 html, body{ height:100%;}