html - 如何在全高应用程序中结合 flexbox 和垂直滚动？

Question

我想使用一个使用 flexbox 的全高应用程序。我在这个链接中使用旧的 flexbox 布局模块(display: box; 和其他东西)找到​​了我想要的东西:CSS3 Flexbox full-height app and overflow

对于只支持旧版 flexbox CSS 属性的浏览器，这是一个正确的解决方案。

如果我想尝试使用较新的 flexbox 属性，我将尝试在同一链接中使用第二种解决方案作为 hack:使用 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 网站，由于内容元素的 flexbox 属性，页脚位于底部。我建议您移动 CSS 代码和结果之间的栏以模拟不同的高度。

Answer 1

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

解决方案是为垂直滚动元素设置高度。例如:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

元素将有高度，因为 flexbox 会重新计算它，除非你想要一个 min-height 所以你可以使用 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;
}

最终代码:http://jsfiddle.net/ch7n6/867/