在flexbox溢出内部嵌套flexbox.如何解决这个问题? [英] Nesting flexbox inside flexbox overflow. How to fix this?
问题描述
因此，我试图通过将div #main 与 height:100％作为flexbox来获取标题和一些适合屏幕的内容，就像这个:
So I was trying to get a header and some content to fit into the screen by having a div #main with height: 100% as a flexbox, just like this:
#main {
height: 150px; /* Using a fixed height here, otherwise the snippet wouldn't work */
}
.flexbox {
display: flex;
flex-direction: column;
}
.header {
flex: 0 1 auto;
border: 2px solid #aa0000;
}
.content {
flex: 1 1 auto;
border: 2px solid #00aa00;
}
.scrollable {
overflow-y: scroll;
}<html>
<body>
<div id="main" class="flexbox">
<div class="header">
HEADER
</div>
<div class="content scrollable">
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
</div>
</div>
</body>
</html>现在，如果 #content 超出了 #main 的高度，则 #content 的滚动条将接管，并且标题保持可见.到目前为止，它的工作原理就像是一种魅力.
So now if #content overflows the height of #main, #content's scrollbar will take over, and the header stays visible. Works like a charm so far.
我的问题是，现在我需要将标题和屏幕拟合内容的另一种组合嵌套到外部内容中，这是我尝试使用另一个嵌套的flexbox解决的:
My problem is now that I need to nest another combination of header and screen fitting content into the outer content, which I tried to solve with another nested flexbox:
#main {
height: 150px; /* Using a fixed height here, otherwise the snippet wouldn't work */
}
.flexbox {
display: flex;
flex-direction: column;
}
.header {
flex: 0 1 auto;
border: 2px solid #aa0000;
}
.content {
flex: 1 1 auto;
border: 2px solid #00aa00;
}
.scrollable {
overflow-y: scroll;
}<html>
<body>
<div id="main" class="flexbox">
<div class="header">
HEADER
</div>
<div class="content flexbox">
<div class="header">
HEADER
</div>
<div class="content scrollable">
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
</div>
</div>
</div>
</body>
</html>因此，基本上，我希望两个标题现在都保持最高，并且一旦内容溢出，则仅使内部内容框滚动.但是，当这样做时，内容会超出(?！) #main 的高度，从而触发浏览器页面的滚动条，而不是其自身的滚动条.我想问题可能是由外部内容框引起的，外部内容框的高度仅由外部flexbox定义.
So basically I want both headers to stay up top now, and have only the inner content box scroll once it overflows. But when it does, the content stretches beyond (?!) #main's height, triggering the browser pages's scrollbar instead of its own one. I suppose the problem may be caused by the outer content box, whose height is only defined by the outer flexbox.
我已经尝试过一种解决方案，其中标题将具有绝对位置，但是对于我需要的内容来说，这还不太可行.如果不是因为这个问题，Flexbox就是完美的选择.
I already had tried a solution where the headers would have absolute positions, but this doesn't quite work out for what I need it. Flexboxes would be just perfect if it wasn't for this problem.
有人可以帮我解决这个问题吗?
Can anyone help me fix this?
推荐答案
您要的东西已经在Chrome中发生了.这使我认为您正在使用FF进行开发.
What you ask for is already happening in Chrome. Which makes me think you're developing with FF.
作为旁注，我认为这是一个错误，仅因为您针对不到15％的目标受众进行开发，而只能为另外65％的受众修复浏览器差异.幸运的是，他们俩都严格遵守标准，如今的差异很小.
您可能更喜欢Chrome而不是FF作为开发工具的另一个原因是，在开发工具方面，FF至少比现在落后6个月了.不要误会我的意思，我不是Chrome的忠实拥护者，因此我完全欢迎使用FF作为首选的浏览设备.但是，作为开发工具，它并不是最好的工具.他们都是免费的.
As a side-note, I believe that's a mistake, simply because you're developing for less than 15% of your target audience to only fix browser differences for another 65% of your audience. Luckily for you, they both keep tight to standards and differences are quite few these days.
Another reason why you might prefer Chrome over FF as a development tool is that FF has consistently been 6 months behind regarding dev tools for at least 4 years now. Don't get me wrong, I'm not a big Chrome fan and I fully welcome using FF as browsing device of choice. But, as a development tool, it's just not the best available. And they're both free.
回到您的问题，在 .flexbox 中添加 overflow-y:auto 似乎也可以解决FF:
Back to your question, adding overflow-y:auto to .flexbox seems to fix it in FF, too:
#main {
height: 150px; /* Using a fixed height here, otherwise the snippet wouldn't work */
}
.flexbox {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.header {
flex: 0 1 auto;
border: 2px solid #aa0000;
}
.content {
flex: 1 1 auto;
border: 2px solid #00aa00;
}
.scrollable {
overflow-y: scroll;
}<html>
<body>
<div id="main" class="flexbox">
<div class="header">
HEADER
</div>
<div class="content flexbox">
<div class="header">
HEADER
</div>
<div class="content scrollable">
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>
</div>
</div>
</div>
</body>
</html>注意:当然，您需要通过 prefixer 来运行代码，以获得更广泛的浏览器覆盖范围.注意下面的"过滤器"框.设置为>0％以实现最大的跨浏览器兼容性.
Note: of course, you'd need to run your code through a prefixer for a wider browser coverage. Mind the "filter" box below it. Set to > 0% for maximum cross-browser compatibility.
这篇关于在flexbox溢出内部嵌套flexbox.如何解决这个问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
