css - 如果内容边距溢出卡片，如何只获得水平滚动条？

Question

我只想在 mat-cards 的长水平 div 上放置水平滚动条

即使 overflow-y 设置为“visible”，垂直滚动条也不会消失。一个快速的解决方法是将 div 的 padding-bottom 设置为 2em，但是，我正在寻找问题的解释以及更优雅的解决方案(如果有的话)。

This is how it currently is

我希望 div.mess 只有一个水平滚动条。一个额外的好处是在 mat-card 中包含 img[mat-card-image] 的 margin-bottom，但不是需要。

Answer 1

尝试使用:

.mess{
    overflow-x: auto;
    overflow-y: hidden
} 

此代码将隐藏您的垂直滚动条。

当您尝试填充超过其宽度或高度的框时会发生滚动，因此您可以简单地隐藏垂直、水平滚动或将父级高度设置为自动:

.example-card{
    width: 150px;
    height: auto;
    box-sizing: border-box;
    }