设置overflow-y也会导致overflow-x发生变化[重复]

当我设定overflow-y在一个街区上，它似乎正在影响overflow-x财产。我做了一个JSFiddle 提供了此问题的示例 http://jsfiddle.net/sgjennings/7fNhx/。这似乎发生在所有浏览器中，所以我认为我遗漏了一些应该显而易见的东西。

我有两个不重叠的块（蓝色和绿色）以及第三个块（红色），具有以下要求：

• 蓝色和红色块是相邻的
• 红色块包含在蓝色块中，但它与绿色块重叠
• 蓝色块必须允许垂直滚动，但不允许水平滚动

但是，如果我设置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;
}

See: CSS 溢出-x：可见；和溢出-y：隐藏；导致滚动条问题 https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue

如果您对overflow-x或overflow-y使用visible并且 除了对对方可见以外的东西，可见值是 解释为自动。