垂直滚动条会导致水平滚动条

Question

我的CSS是这样的：

div.SOMECLASS { 
    position: absolute; 
    max-height: 300px 
    height: auto; 
    width: auto; 
    overflow: auto; 
    ... 
} 

DIV的高度和宽度比例自动创建。虽然高度固定为最大，但只要达到此值，就会出现垂直滚动条。这工作都很漂亮。

现在的问题：
如果垂直滚动条出现，他们使用了周围的水平空间 10px的，因为滚动条将被放置内的div。
然而，宽度是不自动定标的，以允许由所述垂直滚动条用完这些额外的10多岁的像素。作为添加垂直滚动条之前的水平宽度只是完全正确的内容（如从width:auto设定期望的），则现在div也显示水平滚动条 - 以允许丢失的10个像素。这很愚蠢。

• 我该如何避免让这些水平滚动条自动缩放以使垂直滚动条适合的宽度div？

如果可能，我正在寻找一种不依赖于完全禁用水平滚动的解决方案，因为这可能在某些时候（即对于某些输入）需要。

Answer 1

我发现这是工作，但离完美远的解决方案：

我添加了一个padding-right : 15px我的div自动增长整个股利。现在，如果出现垂直滚动条，它们就会填充到填充内，因此水平宽度仍然可以。

遗憾的是，当不需要垂直滚动时，填充当然也会出现，这使得我的div只比它的宽度稍微宽一些：：/在我眼中，这仍然比不需要的水平滚动条。

Answer 2

只是想出了一个漂亮的差强人意的解决方案（至少我的版本这个问题）。

我承担与width: auto的问题是，它的行为类似于width: 100vw;问题是，当垂直滚动条出现时，视窗宽度保持不变（尽管〜10px滚动条），但可视区域（我称之为）减少了10px。

通过个它定义在这个“可视区域”的条款显然定义的宽度，因此改变你的代码：

div.SOMECLASS { 
    position: absolute; 
    max-height: 300px 
    height: auto; 
    width: 100%; 
    overflow: auto; 
    ... 
} 

应该允许内容正确重新调整！

p.s.您也可以改为添加overflow-x: hidden，这将停止显示水平滚动条，而只需在垂直滚动条出现时从div的右侧减去〜10px。