绝对定位元素相对于父元素上的滚动条（具有溢出自动），即使没有可见的滚动条

Question

这种情况很难解释，因为它需要非常具体的设置。

.flex {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.flex-item {
  flex: 1 0 0px;
  position: relative;
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: cyan;
  overflow-y: auto;
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  background-color: red;
}

<div class="flex">
  <div class="flex-item">
    <div class="container">
      <div class="top"></div>
    </div>
  </div>
</div>

容器元素有overflow-y: auto，如果需要，它应该显示一个滚动条，但是在这种情况下没有显示滚动条，但红色条的位置就好像有一个滚动条可见：

我在示例中使用的每个样式都是发生错误所必需的。必须有一个定位的flexbox项目，其中的定位元素具有溢出自动，并且必须有另一个绝对定位的元素。

如果您运行代码段并在整页中打开它，然后垂直调整窗口大小，它会神奇地修复自己，这很奇怪。

在其他浏览器（Firefox和Safari）中，它可以正确呈现：

有什么方法可以稍微改变CSS，以便它没有差距渲染？这实际上是Chrome错误，如果是这样我应该报告吗？

我在Chrome 61.0.3163.91和63.0.3218.0进行了测试。

Answer 1

这似乎是Chrome错误（如果已经提交，则尚未找到）。

解决方法1：由于弹性行项目默认为垂直拉伸，因此请flex-item height: 100%

Fiddle demo

Stack snippet

.flex {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.flex-item {
  flex: 1 0 0px;
  position: relative;
  height: 100%;
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: cyan;
  overflow-y: auto;
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  background-color: red;
}

<div class="flex">
  <div class="flex-item">
    <div class="container">
      <div class="top"></div>
    </div>
  </div>
</div>

解决方法2：添加包装器（inner），将其设置为全宽/高度并为其指定overflow-y: auto

Fiddle demo

Stack snippet

.flex {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.flex-item {
  flex: 1 0 0px;
  position: relative;
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: cyan;
}

.inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  background-color: red;
}

<div class="flex">
  <div class="flex-item">
    <div class="container">
      <div class="inner">
        <div class="top"></div>
      </div>
    </div>
  </div>
</div>