最新的 Chrome 和 Flexbox/overflow 有问题

Question

我们有一个包含很多子元素的 div 元素，这在 Mac 的最新 Chrome (79) 中显示不正确。我们得到了两个滚动条，看起来列表占用了太多 space 并迫使 titlePanel 和 actionPanel 离开视口。查看屏幕截图。我们希望 UI 占据浏览器的整个高度 window，我们希望列表元素占据剩余的 space 并在其中有一个滚动条。

正确：

不正确（注意两个蓝色面板和两个滚动条）：

这在 Chrome 78 之前都可以正常工作，并且在 Mac 上的最新 Safari 中仍然可以正常工作。我们还在最新的 iOS 上对 Chrome/Safari 进行了测试，在这里它也可以工作。它不适用于 Mac 上的最新 Chrome 和三星 S10，因此我们预计 Chrome 的最新更新会引入一些变化。

但是，我不能完全确定我们的 HTML/CSS 是否正确。我们可以通过将 overflow-y:auto 添加到 contentPanel 来解决这个问题，但我预计列表元素上的溢出就足够了（直到最近的 Chrome 更新都是如此）。

是我们的 HTML/CSS 不好还是最新的 Chrome 有问题？

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.mainPanel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  background: blue;
}

.contentPanel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;

   /*overflow-y:auto*/;
}

.titlePanel {
  flex: 0 0 auto; 
}
.actionPanel {
  flex: 0 0 auto;
}

.list {
  height:100%;
  overflow-y:auto;
  background:tomato;
}

<div class="container">
  <div class="mainPanel">
    <div class="contentPanel">
      <div class="titlePanel">TITLE</div>
      <div class="list">
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
        <div>entry</div>
      </div>
    </div>
    <div class="actionPanel">Actions</div>
  </div>
</div>

Answer 1

你的 html/css 的一个问题是你的 contentPanel 有 100% height 并且你有另一个兄弟元素 (actionPanel) 在下面。总高度超过 100%，所以你得到那个外滚动条。

快速修复是将 actionPanel 放入 contentPanel。

或者让 contentPanel 的高度变小。例如height: calc(100% - 18px);

Answer 2

我试图从您的代码中删除所有高度属性，它运行良好，正如您在显示的第一张图片中提到的那样。也许只设置一个容器 div 到 height: 100%; 将确保您想要的结果

Answer 3

只是想提出另一种可能的解决方案。我已经为这个问题苦苦挣扎了几个小时（这就是我来到这里的方式），事实上它只发生在 Mac 昨天更新 Chrome 之后。

我最终做的是将 .list 上的 height: 100% 替换为：

flex: 1 1 auto;
height: 0;

这似乎对 Chrome 79 有效，并且它在 Chrome、Windows 和 Safari 上仍然可以正常工作。我还没有在其他浏览器中测试过它，所以你可能想这样做。

最新的 Chrome 和 Flexbox/overflow 有问题

Problem with latest Chrome and Flexbox/overflow

html

css

google-chrome

overflow

flexbox