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

时间:2018-03-07 15:53:40

标签: css css3 sass flexbox css-position

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

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

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

JS Fiddle example

1 个答案:

答案 0 :(得分:0)

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

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

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