Flexbox和垂直滚动
我想要使用Flexbox的全高应用程序。 我在这个链接中发现了我想要使用旧的flexbox（display：box;以及其他内容）：CSS3 Flexbox全高应用程序和溢出
这是旧版本的flexbox css属性的正确解决方案。
如果我想尝试使用新的flexbox属性，我会尝试在同一链接中使用第二个解决方案，但使用高度为0px的容器 “hacking”flexbox ; 它使显示一个垂直滚动。
我不喜欢它很多，因为它引入了其他问题， 它比解决方案更适合工作 。
我准备了一个基础示例jsfiddle：http://jsfiddle.net/ch7n6/
#container {
display: -webkit-flex;
-webkit-flex-direction: column;
height: 100%;
}
#container article {
-webkit-flex: 1 1 auto;
overflow-y: scroll;
}
它是一个“全高HTML网页”，由于内容元素的弹性框，页脚处于最底层。 我建议你移动CSS代码和结果之间的酒吧来模拟不同的高度。
感谢https://stackoverflow.com/users/1652962/cimmanon给了我答案。
解决方案是设置垂直滚动元素的高度。 例如：
#container article {
-webkit-flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}
元素将有高度，因为flexbox会重新计算它，除非您想要最小高度，因此您可以使用height：100px; 它是完全一样的：min-height：100px;
#container article {
-webkit-flex: 1 1 auto;
overflow-y: auto;
height: 100px; /* == min-height: 100px*/
}
所以如果你想在垂直滚动中使用最小高度，最好的解决方案是：
#container article {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 100px;
}
如果您只想完整垂直滚动以防万一没有足够的空间来查看文章：
#container article {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
最终代码：http://jsfiddle.net/ch7n6/867/
Flexbox规格编辑器在这里。
这是flexbox的一个鼓励使用，但有几件事情你应该调整为最佳行为。
不要使用前缀。 在大多数浏览器中，未固定的flexbox都得到很好的支持。 总是从前缀开始，只有在必要时添加前缀才能支持它。
由于您的页眉和页脚不能弯曲，它们都应该有flex: none; 设置在他们身上。 现在你有类似的行为，由于一些重叠的影响，但你不应该依赖，除非你想在以后意外混淆自己。 （默认为flex:0 1 auto ，因此它们从自动高度开始，可以缩小但不增长，但它们也会overflow:visible默认情况下overflow:visible ，这会触发它们的默认min-height:auto防止它们收缩。如果你在它们上面设置了overflow ， min-height:auto的行为会改变（切换到零而不是最小内容），并且它们会突然被超高的<article>元素压扁。）
您也可以简化<article> flex - 只需设置flex: 1; 你会很开心。 尝试坚持使用https://drafts.csswg.org/css-flexbox/#flex-common中的常见值，除非您有充分的理由去做更复杂的事情 - 它们更易于阅读和覆盖大部分行为你会想要调用。
目前的规范说这与flex: 1 1 auto有关flex: 1 1 auto ：
根据width / height属性确定物品的大小，但使其具有充分的灵活性，以便沿主轴吸收任何可用空间。 如果所有项目都是flex: auto ， flex: initial或flex: none ，则物品大小后的任何可用空间均匀分布到flex: auto项目。
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common
在我看来，如果你说一个元素的高度是100px，那么它就更像是一个“建议”的大小，而不是绝对的。 由于允许缩小和增长，因此占用尽可能多的空间。 这就是为什么将此行添加到“主”元素的工作原理： height: 0 （或任何其他小数字）。