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

I think this is what you are trying to do: http://jsfiddle.net/audetwebdesign/jwXaj/ but the `#floater` block needs to be a sibling of the `#left` and `#right` blocks. — Marc Audet, Aug 08 '13 at 20:34
I have this http://jsfiddle.net/7fNhx/1/ ...not sure what u try to achieve tho — Alex Garulli, Aug 08 '13 at 20:41
@MarcAudet The #floater can't be a sibling because in the page where I'm actually having the problem, '#left' is actually a class and there are many of them, each with their own floater. — Stephen Jennings, Aug 08 '13 at 21:09

score 54 · Accepted Answer · edited May 04 '20 at 16:05

54

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.

edited May 04 '20 at 16:05

robsch

9,358
9
63
104

answered Aug 08 '13 at 20:16

David Bradbury

1,997
3
19
23

27

It's 2015, and we are on the 3rd iteration of CSS standards, and there *still* isn't an easy or graceful way to clear fix... How very frustrating. – Sean Kendle Oct 07 '15 at 15:51
31

It's 2018 now, still frustrating. – Dohab Jul 12 '18 at 02:02
40

2019 and we are still at the same place as in 2013 :) – zmuci Feb 13 '19 at 14:13
16

2020 here ... hopefully css4 or css* will address this issue (and many many others)... – rubmz Jan 06 '20 at 13:54
38

2030 has arrived and now we're all just floating orbs of light – duhaime Jan 08 '20 at 15:42
8

I am limited by the technology of my time – derbenoo Jun 10 '20 at 11:43
1

Found this looking to see if the standard had changed lately, nope. Oddly though some of our stuff just broke recently where we were setting overflow-x and not overflow-y. So some browser interpretations must have changed... – M1ke Aug 18 '20 at 13:32
3

2022 its still at the same place – Allan Banis Nov 01 '22 at 07:33
It's 2080 now and the world has ended – Saral Mar 15 '23 at 21:26
It's 3925 now and glip glorp fleep floop – Dan Mar 15 '23 at 23:14
1

2023 its still at same place – Usiel May 23 '23 at 16:36

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

1 Answers1

Linked