Flexbox 溢出滚动条显示在正文而不是内部元素上
Posted
技术标签:
【中文标题】Flexbox 溢出滚动条显示在正文而不是内部元素上【英文标题】：Flexbox overflow scrollbar displaying on body instead of inner elements 【发布时间】：2018-01-15 00:54:50 【问题描述】：问题：
在使用带有溢出的 flexbox 的全尺寸应用布局（100% 宽度，100% 高度）中，滚动条不会在 Firefox、IE 或 Edge 中显示为溢出。它们确实在 Chrome 中正确显示。在元素上的 FF/IE/Edge 中没有垂直滚动条，而是将滚动条应用于整个页面。
我的尝试：
如其他几个 SO 答案中所述，我已尝试将 min-height: 0; 添加到 flex 元素/父项中。我无法让这个解决方案发挥作用，但也许我做错了什么。
截图：
铬：
火狐：
示例：
https://codepen.io/gunn4r/pen/WEoPjN
html
height: 100%;
.flex-grow
flex: 1;
.canvas-wrapper
overflow: scroll;
.canvas
width: 3000px;
height: 3000px;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body class="h-100">
<div class="h-100 container-fluid d-flex flex-column">
<div class="row bg-warning">
<div class="col-12 py-4">Top Bar</div>
</div>
<div class="row no-gutter flex-grow">
<div class="col-9 px-0 d-flex flex-column">
<div class="canvas-wrapper">
<div class="canvas bg-success">
Canvas
</div>
</div>
<div class="bg-danger py-3">
Canvas Footer
</div>
</div>
<div class="col-3 bg-primary">
<div class="sidebar-item">Sidebar</div>
</div>
</div>
<div class="row bg-warning">
<div class="col-12 py-2">Overall Footer</div>
</div>
</div>
</body>【问题讨论】：
【参考方案1】：看起来问题出在您的这部分代码：
.canvas-wrapper
overflow: scroll;
您希望此元素具有滚动条。但是，该元素没有定义的高度。
来自MDN：
为了让
overflow生效，块级容器 必须具有设定的高度（height或max-height）或white-space设置为nowrap。
Chrome 似乎并不关心高度要求。其他浏览器可以。
这应该足以让它跨浏览器工作：
.canvas-wrapper
overflow: scroll;
flex: 1 0 1px;
html
height: 100%;
.flex-grow
flex: 1;
.canvas-wrapper
overflow: scroll;
flex: 1 0 1px; /* NEW */
.canvas
width: 3000px;
height: 3000px;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="h-100">
<div class="h-100 container-fluid d-flex flex-column">
<div class="row bg-warning">
<div class="col-12 py-4">Top Bar</div>
</div>
<div class="row no-gutter flex-grow">
<div class="col-9 px-0 d-flex flex-column">
<div class="canvas-wrapper">
<div class="canvas bg-success">
Canvas
</div>
</div>
<div class="bg-danger py-3">
Canvas Footer
</div>
</div>
<div class="col-3 bg-primary">
<div class="sidebar-item">Sidebar</div>
</div>
</div>
<div class="row bg-warning">
<div class="col-12 py-2">Overall Footer</div>
</div>
</div>
</body>【讨论】：
当然...+1...我尝试了flex-grow: 1，但没有成功，所以选择了绝对位置变量
更好！感谢 MDN 参考，我错过了那部分！【参考方案2】：
当在元素上使用百分比作为高度时，它的所有祖先也需要设置一个高度，如果都有百分比，则需要将其一直设置到 html/body。
当与 Flexbox 结合使用时，这可能会变得非常棘手，因为当需要在所有上升点上设置 height: 100% 时，其他不需要的渲染问题可能会导致布局中断。
这是一个完美的跨浏览器解决方案，其中添加了一个额外的包装器canvas-fix，用于canvas，然后使用position: absolute，我们可以完成这项工作。
Fiddle demo
堆栈sn-p
html
height: 100%;
.flex-grow
flex: 1;
.canvas-wrapper
flex-grow: 1; /* take all remaining space */
width: 100%; /* full width */
position: relative; /* for the absolute positioned fix */
.canvas-fix /* added rule */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: scroll;
.canvas
width: 3000px;
height: 3000px;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body class="h-100">
<div class="h-100 container-fluid d-flex flex-column">
<div class="row bg-warning">
<div class="col-12 py-4">Top Bar</div>
</div>
<div class="row no-gutter flex-grow">
<div class="col-9 px-0 d-flex flex-column">
<div class="canvas-wrapper">
<div class="canvas-fix">
<div class="canvas bg-success">
Canvas
</div>
</div>
</div>
<div class="bg-danger py-3">
Canvas Footer
</div>
</div>
<div class="col-3 bg-primary">
<div class="sidebar-item">Sidebar</div>
</div>
</div>
<div class="row bg-warning">
<div class="col-12 py-2">Overall Footer</div>
</div>
</div>
</body>【讨论】：
很好的答案！我担心当动态增加诸如页脚之类的高度时会导致问题，但是由于绝对定位的元素嵌套在相对元素下，所以一切都很完美。你就是男人！以上是关于Flexbox 溢出滚动条显示在正文而不是内部元素上的主要内容，如果未能解决你的问题，请参考以下文章
打开将“溢出：隐藏”分配给正文的模式或窗口时，页面滚动到最顶部