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

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