不需要的垂直滚动条

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>