为什么我在这个div中获取滚动条？

我已经设置了溢出，因为我想限制框的高度并在需要时显示滚动条;所以我添加了overflow-y: auto;，因为这通常可以实现。但是现在我在示例的第二个框中看到了水平滚动条，尽管我不知道为什么？

我试着加入overflow-x: visible;但它没有工作。我不想在这些框上设置任何宽度，因为它们只需要是内容的宽度+一些填充。

您还会看到垂直滚动条过早启动，并且不允许填充所需。

我能在这里做什么？

2013-12-23 Brett

的jsfiddle Demo

两个原因和修复

在第二个div占用太多的宽度造成横向溢出的内容，因此增加了宽度

而不是overflow-x:visible尝试overflow-x:hidden隐藏水平滚动条，即使宽度较高

2013-12-23 12:28:26

这有效地摆脱了滚动条，但仍然错过了在右侧的填充 - 我注意到你增加了一个宽度，我不是真的想要做的，因为框的大小会有所不同。 – Brett

不是问题，只要删除宽度并增加li的填充权即可。这里是更新的[小提琴]（http://jsfiddle.net/surjithctly/BCTF9/2/） –

，但是当盒子没有滚动条时，这不会导致比平常更大的填充？ – Brett

滚动条正在出现，因为第二个div中有很多项目。尝试删除这些项目，他们会消失。

2013-12-23 12:24:37 Kishori

.cat_list { 
    overflow-y: auto; 
    overflow-x: hidden; 
    min-width: 200px; 
    padding: 10px; 
}

更换它

2013-12-23 12:25:25 Anup

该工程可以摆脱滚动条，但仍然错过了垫在右边。 – Brett

检查编辑的答案 – Anup

与此

CSS

.cat_list{ height:200px; 
     background:#e4e4e4; 
     width:200px; 
     overflow:hidden; 
     overflow-y:scroll; 
     overflow-x:hidden;}

HTML

<div class="cat_list"></div>

尝试3210

2013-12-23 12:27:53

回答