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

问题

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

回答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.

来源：https://stackoverflow.com/questions/18135204/setting-overflow-y-causes-overflow-x-to-change-as-well

标签

html

css

stylesheet