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

匆匆过客 提交于 2021-01-21 06:20:39

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!