如何在全高应用程序中结合使用flexbox和垂直滚动功能？
我想使用使用flexbox的全高应用程序。我使用旧的flexbox布局模块(display: box;和其他东西)在这个链接中找到了我想要的：CSS3 Flexbox full-height app and overflow
对于只支持旧版本的flexbox CSS属性的浏览器来说，这是一个正确的解决方案。
如果我想尝试使用较新的flexbox属性，我将尝试使用同一链接中列出的第二个解决方案:使用带有height: 0px;的容器。它使得显示垂直卷轴。
我不太喜欢它，因为它引入了其他问题，而且它更多的是一种变通而不是解决方案。
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
#container article {
flex: 1 1 auto;
overflow-y: scroll;
}
#container header {
background-color: gray;
}
#container footer {
background-color: gray;
}<section id="container" >
<header id="header" >This is a header</header>
<article id="content" >
This is the content that
<br />
With a lot of lines.
<br />
With a lot of lines.
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
<br />
This is the content that
<br />
With a lot of lines.
<br />
</article>
<footer id="footer" >This is a footer</footer>
</section>
我还准备了一个带有基本示例的JSFiddle：http://jsfiddle.net/ch7n6/
它是一个全高的HTML网站，由于content元素的flexbox属性，页脚在底部。我建议你在CSS代码和结果之间移动条来模拟不同的高度。
回答 3
Stack Overflow用户
发布于 2013-02-20 02:39:00
感谢https://stackoverflow.com/users/1652962/cimmanon给了我答案。
解决方案是设置垂直可滚动元素的高度。例如：
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}元素将高度设置为，因为flexbox会重新计算它，除非您需要一个最小高度，因此可以使用height: 100px;，使其与：min-height: 100px;完全相同
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 100px; /* == min-height: 100px*/
}因此，如果您希望在垂直滚动中显示min-height，最好的解决方案是：
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 100px;
}如果你只是想要完整的垂直滚动，以防没有足够的空间来查看文章：
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}Stack Overflow用户
发布于 2015-12-19 03:31:59
Flexbox规范编辑器在这里。
这是对flexbox的一种鼓励使用，但有一些事情您应该调整以获得最佳行为。
- 不要使用前缀。无前缀的flexbox在大多数浏览器上都得到了很好的支持。
- 因为页眉和页脚不是用来伸缩的，所以它们应该都设置了
flex: none;。现在，由于一些重叠的效果，你有类似的行为，但你不应该依赖它，除非你想在以后意外地迷惑自己。(默认值是flex:0 1 auto，所以它们从自动高度开始，可以收缩但不能增长，但默认情况下它们也是overflow:visible，这会触发它们的默认min-height:auto，以防止它们完全收缩。如果你给它们设置了overflow，min-height:auto的行为就会改变(切换到0而不是最小内容)，它们会突然被超高的<article>flex挤压--只需设置flex: 1;，你就可以开始工作了。除非你有很好的理由去做一些更复杂的事情，否则尽量坚持使用https://drafts.csswg.org/css-flexbox/#flex-common中的通用值-它们更容易阅读，并且涵盖了你想要调用的大多数行为。
Stack Overflow用户
发布于 2013-02-20 02:50:18
当前的规范对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 (或任何其他小数字)。
https://stackoverflow.com/questions/14962468
复制相似问题