如何防止overflow-x auto导致垂直滚动条？

Question

我有一个弹性容器，当弹性项目的数量超过可用的视口宽度时，它会显示一个水平滚动条。

这可以正常工作，直到我将一个伪元素（向下插入符号）添加到其中一个项目，导致出现垂直滚动条。

正如所料，将overflow-y: hidden添加到我的容器中会隐藏部分伪元素。所以我的问题是，在尝试将x轴独立设置为“自动”时，如何防止垂直滚动条？

JS Fiddle example

Answer 1

然后，您需要添加额外的space以避免Vertical Scroll。

您只需在.hud-card此选择器上添加额外空间即可实现此目的。

.hud-card {
    margin-bottom: 12px;
}