overflow-y:visible not working when overflow-x:hidden is present

Question

Doesn't work properly in Chrome or Firefox. Is there any workaround to this?

   <!DOCTYPE html>
   <html>
   <head></head>
   <body>
    <h3>overflow-y:visible</h3>

    with overflow-x:hidden
    <div style="overflow-x:hidden;overflow-y:visible;width:100px;height:100px;   position:relative;background:#666;">
        <div style="top:20px;left:20px;    width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>

    without overflow-x:hidden
    <div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
        <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>

   </body>
   </html>

http://jsfiddle.net/sMNyK/

The real life scenario involves components that absolutely must have overflow-x:hidden, but that will trigger popup-menus that need to be able to break free from the element in y-direction. Should I just position those menus outside their parent components, or is there a better fix?

I spotted this, which looks like its still an issue in FF (v21) and Chrome (v27). My issue: `overflow-x: visible; overflow-y: hidden;` yet cropping occurs on both axis. — Sprintstar, Jun 07 '13 at 15:08
I ran into this problem today as well, both in FF and Chrome. It certainly looks like a bug rather than expected behavior. — smohadjer, Aug 05 '14 at 13:37
lol It's now almost 2020 and this is still an issue. I found a sort-of workaround by not setting a static height on the element, but it's not a great solution. — garrettmills, Dec 30 '19 at 22:11

score 51 · Answer 1 · edited May 23 '17 at 10:29

51

This likely has to do with the issue addressed here: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

In short, when 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 23 '17 at 10:29

Community

1
1

answered Jun 10 '13 at 09:02

Sprintstar

7,938
5
38
51

46

is this a bug that browser vendors should fix or spec by W3C? Because it's awful... – ProblemsOfSumit Oct 04 '13 at 10:17
24

2.5 years later and this bug still exists – Daniel Kobe Apr 16 '16 at 08:06
7

FF 52 and this still happens. add one more year... – Sebastianb Jul 31 '17 at 19:22
4

FF 57, here too – fedetibaldo Nov 30 '17 at 18:10
17

Guess which issue still exists at the end of 2018... *facepalm* – Vitalii Romaniv Dec 12 '18 at 09:54
4

This bug is still haunting my projects – ApplePearPerson May 22 '19 at 14:18
3

Still a bug.... FF72 can't believe they haven't fixed that one yet! – beniutek Feb 02 '20 at 16:05
24

2020 still the same... – Eduard Fedoruk Mar 30 '20 at 15:31
21

2021 and this hits harder than covid – Saša Šijak Jan 14 '21 at 08:55
10

I'm from the future. It's 2045, the issue still exists – Roudy Tarabay Apr 15 '21 at 10:10
11

2022 just knocked in and the issue still exists. :( – Deepak Yadav Dec 31 '21 at 19:10
1

This is legit unacceptable! – Ben Racicot Sep 19 '22 at 14:26
4

10 days till 2023 and still: I lost almost a full day trying to figure out why my CSS does not work as expected... – BlaM Dec 21 '22 at 16:42
1

@BlaM Glad to still be helping, ten years later :) – Sprintstar Dec 22 '22 at 16:30
1

The cycle continues.... – Nicholas Aponte May 03 '23 at 17:15

score 4 · Answer 2 · answered Jul 17 '12 at 12:24

4

I think you can get what you want with an extra wrapping div that does the hiding but does not have the position: relative set (see fiddle):

<div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
    <div style="overflow-x:hidden">
    ooooooooooooooooooooooooooooooooooooooooooooooo  
        <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>
</div>

answered Jul 17 '12 at 12:24

ScottS

71,703
13
126
146

1

This won't work, since the components requiring overflow-y:visible are inside the ones requiring overflow-x:hidden – Seppo420 Jul 17 '12 at 12:29
@user1185421--First, you said in your question that putting them "outside the parent components" was perhaps the only option. My solution should work as long as those components requiring `overflow-x:hidden` do not have a `position` set on them. This will allow the `absolute` element to relate only to the div that is `overflow-y: visible`. – ScottS Jul 17 '12 at 12:37
2

@user1185421--[here's a fiddle](http://jsfiddle.net/sMNyK/4/) with a wide `div` containing the pop-out div. – ScottS Jul 17 '12 at 12:39
You saved my day, Scotts! Thanks a lot! – Peter Babukh Mar 19 '20 at 18:52

overflow-y:visible not working when overflow-x:hidden is present

2 Answers2

Linked

Related