最新的 Chrome 和 Flexbox/溢出问题

Question

我们有一个包含许多子元素的 div 元素，但在 Mac 上的最新 Chrome (79) 中无法正确显示。我们得到了两个滚动条，看起来列表占用了太多空间并迫使 titlePanel 和 actionPanel 离开视口。见截图。 我们希望 UI 占据浏览器窗口的整个高度，并且希望列表元素占据剩余空间并在其中有一个滚动条。

正确：

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

这在 Chrome 78 之前一直可以正常工作，并且在 Mac 上的最新 Safari 中仍然可以正常工作。我们还在最新 iOS 上的 Chrome/Safari 上进行了测试，在这里它也可以工作。它不适用于 Mac 和三星 S10 上的最新 Chrome，因此我们预计 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

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

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

flex: 1 1 auto;
height: 0;

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

Answer 2

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

快速解决方法是将actionPanel 放入contentPanel。

或者使contentPanel 占用更少的高度。 例如height: calc(100% - 18px);

Answer 3

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