Flexbox 溢出滚动条显示在正文而不是内部元素上答案

【问题标题】：Flexbox overflow scrollbar displaying on body instead of inner elementsFlexbox 溢出滚动条显示在正文而不是内部元素上
【发布时间】：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>

【问题讨论】：

标签： html css bootstrap-4 flexbox overflow

【解决方案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>

【讨论】：

很好的答案！我担心当动态增加诸如页脚之类的高度时会导致问题，但是由于绝对定位的元素嵌套在相对元素下，所以一切都很完美。你就是男人！