Flexbox和垂直滚动使用NEWER flexbox api的全高应用程序

我想要使​​用flexbox的全高应用程序。 我在这个链接中find了我想要使用旧的flexbox（display：box;以及其他东西）： CSS3 Flexbox全高应用程序和溢出

这是旧版本的flexbox css属性的正确解决scheme。

如果我想尝试使用较新的Flexbox属性，我将尝试在同一个链接中使用第二个解决scheme，但使用高度为0px的容器 “hacking”flexbox ; 它使显示一个垂直滚动。

我不喜欢它很多，因为它引入了其他问题， 它比解决scheme更像一个工作环境。

我已经准备了一个基础示例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网页”，由于内容元素的弹性框，页脚处于底部。 我build议你移动CSS代码和结果之间的酒吧来模拟不同的高度。

Answer 1

感谢https://stackoverflow.com/users/1652962/cimmanon给了我答案。;

解决scheme是设置垂直滚动元素的高度。 例如：

 #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*/ } 

所以如果你想在垂直滚动中使用最小高度 ，最好的解决scheme是：

 #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/

Answer 2

Flexbox规格编辑器在这里。

这是Flexbox的一个鼓励使用，但有一些事情你应该调整最佳行为。

• 不要使用前缀。 没有前缀的flexbox在大多数浏览器中都得到很好的支持。 总是从前缀开始，只有在必要时才添加前缀来支持它。

• 由于您的页眉和页脚不能弯曲，他们都应该有flex: none; 设置在他们身上。 现在你有类似的行为，由于一些重叠的影响，但你不应该依赖，除非你想以后不小心混淆自己。 （默认是flex:0 1 auto ，所以它们从自动高度开始，可以缩小但不能增长，但是它们也是overflow:visible默认是overflow:visible的，这会触发它们的默认min-height:auto以防止它们收缩。如果你设置了overflow ， min-height:auto变化（切换到零而不是min-content），它们会突然被超高的<article>元素压扁。）

• 你也可以简化<article> flex – 只需设置flex: 1; 你会很好走。 尝试坚持使用https://drafts.c​​sswg.org/css-flexbox/#flex-common中的常见值，除非您有一个很好的理由去做更复杂的事情; – 它们更容易阅读和覆盖大部分行为你会想调用。

Answer 3

目前规范说这与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高，它被视为更像一个“build议”的大小，而不是一个绝对的。 因为它被允许缩小和增长，所以占用尽可能多的空间。 这就是为什么添加这条线到你的“主要”元素的作品： height: 0 （或任何其他小数字）。