63

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?

Improve this question
5
  • 8
    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. Commented Jun 7, 2013 at 15:08
  • 1
    I ran into this problem today as well, both in FF and Chrome. It certainly looks like a bug rather than expected behavior. Commented Aug 5, 2014 at 13:37
  • 1
    you getting problem because position:relative; Commented Oct 10, 2016 at 6:23
  • 3
    No solutions yet? It's been 5 years & 4 months. Commented Nov 16, 2017 at 19:28
  • 3
    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. Commented Dec 30, 2019 at 22:11

2 Answers 2

Reset to default
62

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

20 Comments

is this a bug that browser vendors should fix or spec by W3C? Because it's awful...
2.5 years later and this bug still exists
Guess which issue still exists at the end of 2018... facepalm
2020 still the same...
2021 and this hits harder than covid
|
5

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>
Improve this answer

3 Comments

This won't work, since the components requiring overflow-y:visible are inside the ones requiring overflow-x:hidden
@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.
@user1185421--here's a fiddle with a wide div containing the pop-out div.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.