html - 不需要的垂直滚动条

Question

这是一个简单的 HTML 示例，其中底部容器在 Chrome 中有一个(可能不合理的)垂直滚动条，这与 Firefox 不同。

<div style="display: flex; flex-direction: column; height: 100px; width: 300px; border: 1px solid black">
  <div style="background-color: burlywood; overflow-y: auto">
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </div>
  <div style="background-color: cadetblue; overflow-y: auto;">
    <div>Test1</div>
  </div>
</div>

在 Firefox (65.0.1) 中呈现

在 Chrome 中呈现 (72.0.3626.119)

什么是正确的呈现方式？什么可能导致这两种浏览器之间的解释混淆？

编辑:应该如何避免这种垂直滚动？这是这里的主要问题。

Answer 1

我不确定这是标准合规性问题。它看起来像是 Firefox 中的一个故障。

以下是三个支持证据:

1. 即使滚动条没有出现在Firefox 的下方框上，滚动功能仍然有效。只需将鼠标悬停在框上并使用鼠标的滚动设备上下滚动即可。正常滚动；你只是看不到滚动条。

2. 从 overflow-y: auto 切换到 overflow-y: scroll。这应该强制滚动条始终出现。在 Firefox 中，它没有。但滚动功能仍然适用于鼠标。

3. 有时，由于我无法确定的原因，滚动条确实呈现在 Firefox 的下方框上。

#container {
  display: flex;
  flex-direction: column;
  height: 100px;
  width: 300px;
  border: 1px solid black;
}

#container > div:first-child {
  overflow-y: auto;
  background-color: burlywood;
}

#container > div:last-child {
  overflow-y: auto; 
  /* test this:  overflow-y: scroll;  */
  background-color: cadetblue;
}

<div id="container">
  <div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
    <div>Test</div>
  </div>
  <div>
    <div>Test1<br>Test1<br>Test1<br>Test1</div>
  </div>
</div>