不需要的垂直滚动条答案

【问题标题】：Undesired vertical scroll bar不需要的垂直滚动条
【发布时间】：2019-07-20 01:56:01
【问题描述】：

这是一个简单的 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)

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

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

【问题讨论】：

@JamesDouglas 按照 CSS 规则，只能有一个正确的渲染。
这不是网页的元素，滚动条是浏览器生成的，所以每个浏览器都会生成一个个性化的，没有正确的，它们是不同的，因为这是两个不同的浏览器，具有不同的控件跨度>
@nano 底部滚动的外观正在这里讨论。应该实施浏览器，以便遵守相同的标准。无论如何，我将编辑问题以询问如何避免滚动，因为这是这里的主要目标。

标签： html css flexbox overflow

【解决方案1】：

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

以下是三个支持证据：

即使滚动条没有出现在 Firefox 的下框，滚动功能仍然有效。只需将鼠标悬停在框上并使用鼠标的滚动装置上下滚动。正常滚动；你只是看不到滚动条。
从overflow-y: auto 切换到overflow-y: scroll。这应该强制滚动条始终出现。在 Firefox 中，它没有。但是滚动功能仍然可以使用鼠标。
有时，由于我无法确定的原因，滚动条实际上会呈现在 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>

【讨论】：

感谢您的回答。是的，我仍在寻找解决方案，我想避免底部面板中的滚动，因为对于这种情况，只有上部容器具有垂直滚动才有意义。布局可能应该重新组织和/或 CSS 更改，但不确定如何。
嗯，它不应该总是隐藏，只是在呈现的情况下。项目的数量可能会有所不同。