时间戳

首页 > 解决方案 > 为什么 Firefox 和 Chrome 在 flex 子项中呈现这个可滚动区域的方式不同，我如何让 Firefox 像 Chrome 一样工作？

css - 为什么 Firefox 和 Chrome 在 flex 子项中呈现这个可滚动区域的方式不同，我如何让 Firefox 像 Chrome 一样工作？

问题描述

我正在构建一个工具栏，该工具栏在页面右侧具有动态数量的元素，其高度始终等于视口高度。

工具栏分为两个区域，如果包含的元素太多，则上部区域应该滚动。

但是，使用我的解决方案，在 Firefox 中，滚动条位于元素上方。在 Chrome 中，它按预期呈现并将要滚动的元素移到一边。

我搜索了一段时间，但我的搜索词与有关 min-height:0 和 min-width:0 的旧问题重叠，用于 flex 子问题。滚动条本身就在我找不到的可滚动区域内容上方的问题。

JSFiddle 上的复制：https ://jsfiddle.net/3o65an7m/4/

复制也复制到这里，但 imo 更容易在 JSFiddle 上看到问题：

html {
  height: 400px;
}

body, .wrap {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.right-bar {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 0;
}

.upper {
  flex-grow: 1;
  overflow-y: auto;
}

.footer {
  color: white;
  width: 100%;
  background: blue;
}

.b {
  height: 20px;
  width: 20px;
  background: red;
  margin: 4px;
  padding: 4px;
}
<html>
<body>
<div class="wrap">
  <div class="right-bar">
    <div class="upper">
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
    </div>
    <div class="lower">
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
      <div class="b"></div>
    </div>
  </div>
  <div class="footer">Text</div>
</div>
</body>
</html>

图像比较；左 FF，右 Chrome。我希望这种行为在 Chrome 中始终可见：

显示 Firefox 和 Chrome 之间渲染差异的图像； 在 Firefox 中，滚动条在元素上方，在 Chrome 中，元素向左移动以避免与滚动条冲突

标签： cssscrollflexbox

解决方案

推荐阅读