Setting overflow-y causes overflow-x to change as well [duplicate]

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.