html - 在元素上设置最大高度会创建水平滚动条

Question

我一直致力于制作一个具有最大高度的下拉菜单，如果超过它，则会在元素上放置垂直滚动条。由于某种原因，当添加此垂直滚动条时，宽度不会自动调整以补偿垂直滚动条的宽度，并且还会创建一个水平滚动条。

这是一个fiddle所以你可以看到我的问题的简化版本。任何人都有一个好的解决方案(除了设置宽度之外，因为我希望它能够适应里面的内容，并且最好没有JavaScript)？

.wrapper { display:inline-block; max-height:200px; overflow-y:auto; background:#f00;}

.wrapper > a { display:inline-block; padding:20px; white-space:nowrap; }

Answer 1

您可以使用overflow-y:scroll。

.wrapper {
    overflow-y:scroll;
    overflow-x:hidden;
}

fiddle :http://jsfiddle.net/4e00dp7w/2/

请注意，实际上并不需要 overflow-x:hidden，只是以防万一。