Html 如何在全高应用程序中结合使用 flexbox 和垂直滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14962468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I combine flexbox and vertical scroll in a full-height app?
提问by José Cabo
I want to use a full-height app using flexbox. I found what I want using old flexbox layout module (display: box;and other things) in this link: CSS3 Flexbox full-height app and overflow
我想使用 flexbox 使用全高应用程序。我display: box;在此链接中使用旧的 flexbox 布局模块（和其他东西）找到了我想要的东西：CSS3 Flexbox full-height app and overflow
This is a correct solution for browsers that only support the old version of the flexbox CSS properties.
对于仅支持旧版 flexbox CSS 属性的浏览器，这是一个正确的解决方案。
If I want to try using the newer flexbox properties, I'll try to use the second solution in the same link listed as a hack: using a container with height: 0px;. It makes to show a vertical scroll.
如果我想尝试使用较新的 flexbox 属性，我将尝试使用与 hack 相同的链接中的第二个解决方案：使用带有height: 0px;. 它使显示垂直滚动。
I don't like it a lot because it introduces other problems and it is more a workaround than a solution.
我不太喜欢它，因为它引入了其他问题，而且它更像是一种解决方法而不是解决方案。
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>I have prepared a JSFiddle as well with a base example: http://jsfiddle.net/ch7n6/
我还准备了一个带有基本示例的 JSFiddle：http: //jsfiddle.net/ch7n6/
It is a full-height HTML website and the footer is at the bottom because of the flexbox properties of the content element. I suggest you move the bar between CSS code and result to simulate different height.
这是一个全高的 HTML 网站，由于内容元素的 flexbox 属性，页脚位于底部。我建议你在 CSS 代码和结果之间移动栏来模拟不同的高度。
回答by José Cabo
Thanks to https://stackoverflow.com/users/1652962/cimmanonthat gave me the answer.
感谢https://stackoverflow.com/users/1652962/cimmanon给了我答案。
The solution is setting a height to the vertical scrollable element. For example:
解决方案是为垂直可滚动元素设置高度。例如：
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 0px;
}
The element willhave height because flexbox recalculates it unless you want a min-heightso you can use height: 100px;that it is exactly the same as: min-height: 100px;
该元素将具有高度，因为 flexbox 会重新计算它，除非您想要一个min-height以便您可以使用height: 100px;它与以下完全相同：min-height: 100px;
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 100px; /* == min-height: 100px*/
}
So the best solution if you want a min-heightin the vertical scroll:
所以最好的解决方案，如果你想min-height在垂直滚动：
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 100px;
}
If you just want full vertical scroll in case there is no enough space to see the article:
如果您只想完全垂直滚动以防没有足够的空间来查看文章：
#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
The final code: http://jsfiddle.net/ch7n6/867/
回答by Xanthir
Flexbox spec editor here.
Flexbox 规范编辑器在这里。
This is an encouraged use of flexbox, but there are a few things you should tweak for best behavior.
这是一种鼓励使用 flexbox 的方法，但您应该调整一些事情以获得最佳行为。
Don't use prefixes. Unprefixed flexbox is well-supported across most browsers. Always start with unprefixed, and only add prefixes if necessary to support it.
Since your header and footer aren't meant to flex, they should both have
flex: none;set on them. Right now you have a similar behavior due to some overlapping effects, but you shouldn't rely on that unless you want to accidentally confuse yourself later. (Default isflex:0 1 auto, so they start at their auto height and can shrink but not grow, but they're alsooverflow:visibleby default, which triggers their defaultmin-height:autoto prevent them from shrinking at all. If you ever set anoverflowon them, the behavior ofmin-height:autochanges (switching to zero rather than min-content) and they'll suddenly get squished by the extra-tall<article>element.)You can simplify the
<article>flextoo - just setflex: 1;and you'll be good to go. Try to stick with the common values in https://drafts.csswg.org/css-flexbox/#flex-commonunless you have a good reason to do something more complicated - they're easier to read and cover most of the behaviors you'll want to invoke.
不要使用前缀。大多数浏览器都支持无前缀的 flexbox。始终以无前缀开头，并且仅在必要时添加前缀以支持它。
由于您的页眉和页脚不打算弯曲，因此它们都应该
flex: none;设置在它们上面。现在，由于一些重叠效应，您有类似的行为，但您不应该依赖它，除非您以后想不小心弄糊涂自己。（默认是flex:0 1 auto，所以它们从它们的自动高度开始，可以缩小但不能增长，但它们也是overflow:visible默认的，这会触发它们的默认值min-height:auto以防止它们完全缩小。如果你曾经overflow对它们设置过，min-height:auto改变的行为（切换到零而不是最小内容）它们会突然被超高<article>元素压扁。）您也可以简化
<article>flex- 只需设置flex: 1;即可。尽量坚持使用https://drafts.csswg.org/css-flexbox/#flex-common 中的通用值，除非你有充分的理由去做更复杂的事情——它们更容易阅读并涵盖了大部分行为你会想要调用。
回答by cimmanon
The current spec says this regarding flex: 1 1 auto:
当前的规范是这样说的flex: 1 1 auto：
Sizes the item based on the
width/heightproperties, but makes them fully flexible, so that they absorb any free space along the main axis. If all items are eitherflex: auto,flex: initial, orflex: none, any positive free space after the items have been sized will be distributed evenly to the items withflex: auto.
根据
width/height属性调整项目的大小，但使它们完全灵活，以便它们吸收沿主轴的任何自由空间。如果所有项目都是flex: auto,flex: initial, 或flex: none，则项目大小调整后的任何正可用空间将均匀分配给带有 的项目flex: auto。
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common
It sounds to me like if you say an element is 100px tall, it is treated more like a "suggested" size, not an absolute. Because it is allowed to shrink and grow, it takes up as much space as its allowed to. That's why adding this line to your "main" element works: height: 0(or any other smallish number).
在我看来，如果你说一个元素是 100 像素高，它更像是一个“建议的”大小，而不是绝对的。因为它可以收缩和增长，所以它占用了尽可能多的空间。这就是为什么将此行添加到您的“主要”元素有效的原因：（ height: 0或任何其他较小的数字）。
