Flexbox中的垂直滚动渲染问题 [英] Vertical scroll rendering issue in Flexbox in Firefox
问题描述
我想在父级中包含一个flex项，以便它不会溢出父级。只有flex项目应该有一个滚动条（如果必要）。
我的样式在Chrome和IE11，但不是Firefox。我怀疑在 flex-basis 样式集在 #wrapper 上的解释有一个不同，但我不能弄清楚
https://i.stack.imgur.com/is6fB.pngalt =Chrome渲染屏幕截图>
这里是在Firefox中发生的情况：
我可以通过添加 #left {height：calc（100vh - 50px））来应用胶带修复。
body，html，h1 {padding：0; margin：0;} header {background-color：rgba（0，255，255，0.2）; height：50px;}＃main {height：100vh; background-color：rgba（0，255，255，0.1）;显示：flex; flex-flow：column;}＃wrapper {display：flex; flex-grow：2; flex-basis：0％;}＃left {overflow-y：scroll; background-color：rgba（0，255，255，0.2）; width：30％;}。box {margin：5px 0; height：50px; width：100％; background-color：rgba（0，0，0，0.2）;}
< div id =main> < header> < h1>标题< / h1> < / header> < div id =wrapper> < div id =left> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < div class =box>< / div> < / div> < / div>< / div>
这与flexbox规范的隐含最小尺寸算法有关。
这是 Firefox错误 。
添加 min-width：0; min-height：0 到 #wrapper 似乎做到了：
#wrapper {
display：flex;
flex-grow：2;
flex-basis：0％;
min-height：0; / * NEW * /
min-width：0; / * NEW * /
}
目前您已将 overflow-y：scroll #left 。
如果还应用 overflow-y：scroll 到 #wrapper ，在Firefox中启动垂直滚动。
为什么Firefox不同地解释代码比Chrome我不能说。渲染引擎有它们的区别。我最近讨论了IE11和Chrome之间的另一个 Flexbox解释问题：
详情：
-
错误1043520 - （minsizeauto-fallout）由于新的min-width：auto/min- flex：auto行为
-
DEMO： a href =http://jsfiddle.net/seqgz8qv/ =nofollow> http://jsfiddle.net/seqgz8qv/ （在FF中滚动）
I want to contain a flex item within the parent so that it does not spill outside of the parent. Only the flex item should have a scrollbar (if necessary).
My styling works fine within Chrome and IE11, but not Firefox. I suspect there is a difference in interpretation of the flex-basis style set on #wrapper, but I cannot figure out why Firefox renders this differently.
Here's the desired rendering as seen in Chrome:
And here's what happens in Firefox:
I could apply a "duct tape" fix by adding #left { height: calc(100vh - 50px); }, but I'd prefer to identify the actual inconsistency if possible.
body, html, h1 {
padding: 0;
margin: 0;
}
header {
background-color: rgba(0, 255, 255, 0.2);
height: 50px;
}
#main {
height: 100vh;
background-color: rgba(0, 255, 255, 0.1);
display: flex;
flex-flow: column;
}
#wrapper {
display: flex;
flex-grow: 2;
flex-basis: 0%;
}
#left {
overflow-y: scroll;
background-color: rgba(0, 255, 255, 0.2);
width: 30%;
}
.box {
margin: 5px 0;
height: 50px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
<div id="main">
<header>
<h1>Header</h1>
</header>
<div id="wrapper">
<div id="left">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
This has to do with the flexbox specification's implied minimum sizing algorithm.
This is a Firefox bug.
Adding min-width: 0; min-height: 0 to #wrapper seems to do the trick:
#wrapper {
display: flex;
flex-grow: 2;
flex-basis: 0%;
min-height: 0; /* NEW */
min-width: 0; /* NEW */
}
Original Answer Below
Currently you have overflow-y: scroll applied to #left.
If you also apply overflow-y: scroll to #wrapper, the vertical scroll launches in Firefox.
As to why Firefox interprets the code differently than Chrome I can't say. The rendering engines have their differences. I recently addressed another flexbox interpretation issue between IE11 and Chrome:
More information:
DEMO: http://jsfiddle.net/seqgz8qv/ (scroll works in FF)
Flexbox and vertical scroll in a full-height app using NEWER flexbox api
这篇关于Flexbox中的垂直滚动渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
