Setting overflow-y causes overflow-x to change as well

Question

When I set overflow-y on a block, it seems to be affecting the overflow-x property. I've made a JSFiddle with an example of this problem. It seems to be happening in all browsers, so I think I'm missing something that should be obvious.

I have two non-overlapping blocks (blue and green) along with a third block (red) with the following requirements:

• The blue and red blocks are adjacent
• The red block is contained in the blue block, but it overlaps the green block
• The blue block must allow vertical scrolling, but not horizontal scrolling

However, if I set overflow-x: visible so the red block overlaps to the right, instead it behaves as though I set it to scroll. However, if I remove the overflow-y property or set it to visible, the red block behaves as I expect.

I do need vertical scrolling, so I'm at a loss for what to do.

With the code below

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;
}

Answer 1

See: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.