我对带有子菜单的twitter bootstrap下拉组件的css overflow属性有问题.
当设置max-height并溢出为auto时,滚动条会出现在列表中,但子菜单会进入水平滚动下的下拉列表,这不是我需要的.
以下是此问题的示例.
我尝试过更改overflow-x和overflow-y的值,但是没有一个能很好地工作.
我有一个div集，用于隐藏内容overflow-x和使用显示（visible）内容overflow-y。
不幸的是，这不符合我的要求。它添加了垂直滚动条-我认为这是因为overflow-x并且overflow-y不能一起使用。
据我所知，是否将一个溢出设置为隐藏，将另一个溢出设置为自动。
还有其他解决方法吗？因此，我可以水平隐藏溢出并垂直显示（无滚动）吗？
只是为了没有混乱，这里有个小提琴来解释更多：http : //jsfiddle.net/kwnQk/
编辑
这是我遇到的实际问题：http : //jsfiddle.net/kwnQk/1/
我有一个从div和jQuery创建的选择框，最终超出了div的高度，导致它添加了滚动条。
遗憾的是，溢出功能的工作方式与之相同，因为div overflow-x 必须隐藏，从而导致div overflow-y是自动的。
编辑2
请参阅此新的JSFiddle，以确切说明为什么我需要溢出：http : //jsfiddle.net/kwnQk/3/
它也包含滑块，需要将其设置为一定的宽度。而且它们不能占据页面的整个高度，因此我也必须限制它们的高度。
是否有可能在垂直可滚动列表中水平溢出项目？
我在这里有一个Codepen示例：
http://codepen.io/baskuipers/pen/GqQYRJ
var $item = $('#1'),
$button = $('.button');
$button.on("click", function() {
$item.toggleClass('addMargin');
});.sidenav {
width: 300px;
background-color: grey;
position: fixed;
padding: 20px;
}
.addMargin {
margin-left: 60px;
}
.item {
width: 100%;
overflow-y: auto;
height: 100vh;
z-index: 5;
position: relative;
}
.sub-item {
transition: margin-left 1s cubic-bezier(0.36, -0.48, 0, 2.22);
background-color: orange;
height: 100px;
width: 100%;
margin-bottom: 10px;
z-index: 10;
position: relative;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav">
<button …似乎overflow-x并且overflow-y不像我期望的那样表现。如果我设置overflow-x为可见，并设置为overflow-y自动，overflow-x则不会显示为可见，而是隐藏。
我错过了什么，或者这是正常的吗？
这是一个例子。
HTML：
</html
<body>
<div class='container'>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
</div>
</body>
</html>
CSS：
</html
<body>
<div class='container'>
<div class='content'>
This is a content
</div>
<div class='content'>
This is …