溢出时不显示垂直滚动：自动答案

【问题标题】：Vertical scroll not being displayed when overflow:auto溢出时不显示垂直滚动：自动
【发布时间】：2021-07-07 08:06:59
【问题描述】：

您好，我遇到了一个问题，垂直滚动未显示在带有overflow:auto 的容器中。问题是容器的高度与内容的高度完全相同，但内容的宽度更大，所以出现了水平滚动，这应该迫使垂直滚动也出现，但事实并非如此。有什么想法吗？

这里是一个代码笔，因为一个例子比文字更好。

https://codepen.io/xmorelll/pen/yLbObdJ

【问题讨论】：

那是因为您的内容高度与您的容器高度相同。滚动条仅在内容溢出时出现。尝试将您的内容高度更改为600px 并查看。
嗯.. 那为什么不把 y-scroll 固定呢？还是改变高度？
是的。但是当水平滚动在那里时。容器高度是 500px - 15px（滚动本身），所以现在容器的实际高度低于仍然是 500px 的内容。即使 css 完全相同，第二个盒子也恰好有两个卷轴。因为内容的高度和宽度将取决于用户信息。但是容器是固定的。所以我可能会遇到滚动不会出现的情况，其他只有一个滚动的情况，但我不知道如何解决这种情况，内容高度与容器相同但宽度更大。

标签： javascript html css scroll

【解决方案1】：

我在 chrome 和 firefox 浏览器上试用此代码。问题是不同的浏览器可能对此有不同的实现。在 chrome（版本 91.0.4472.114，Linux）中，容器为 485px，但在 Firefox 中，其宽度为 500px。在我的 Firefox 浏览器（版本 89，Linux）中也可以看到垂直滚动。当我在 chrome 中更改容器类的 CSS 属性时，它显示垂直滚动。基本上， (overflow: auto) 将在内容超过父级的宽度或高度时显示滚动。

【讨论】：

我在 Mac 上使用 91.0.4472.114。但我不明白为什么一开始它没有在左侧框中显示垂直滚动。如果它的 html 和样式与右框相同。