当我overflow-y在一个块上设置时，它似乎正在影响overflow-x属性。我用这个问题的一个例子制作了一个 JSFiddle。它似乎发生在所有浏览器中，所以我认为我遗漏了一些应该很明显的东西。
我有两个不重叠的块（蓝色和绿色）以及第三个块（红色），具有以下要求：
- 蓝色和红色块相邻
- 红色块包含在蓝色块中，但它与绿色块重叠
- 蓝色块必须允许垂直滚动，但不能水平滚动
但是，如果我将overflow-x: visible红色块设置为向右重叠，则它的行为就像我将其设置为scroll. 但是，如果我删除该overflow-y属性或将其设置为visible，红色块的行为与我预期的一样。
我确实需要垂直滚动，所以我不知道该怎么做。
使用下面的代码
HTML：
<div id="container">
<div id="left">
<div id="floater"></div>
</div>
<div id="right">
</div>
</div>
CSS：
#container {
height: 200px; width: 200px;
position: relative;
background-color: #ccc; border: solid 5px black;
}
#left {
position: absolute;
top: 0; left: 0; bottom: 0; width: 100px;
overflow-x: visible;
overflow-y: auto; /** REMOVING THIS CHANGES THE RESULT **/
background-color: blue;
z-index: 2;
}
#right {
position: absolute;
top: 0; right: 0; bottom: 0; width: 100px;
z-index: 1;
background-color: green;
}
#floater {
position: absolute;
right: -20px; top: 30px; height: 40px; width: 40px;
background-color: red;
}