Flexbox溢出-y滚动条显示在主体而不是Firefox/IE/Edge中的元素
gun*_*n4r 10 html css css3 flexbox bootstrap-4
问题:
在使用带溢出的flexbox的全尺寸应用布局(100%宽度,100%高度)中,滚动条不会在Firefox,IE或Edge中显示溢出y.它们可以在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>看起来问题源于代码的这一部分:
.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`,但是没有用,所以选择_absolute位置变量_ (2认同)