6

I'm attempting to allow for overflow on the y-axis, while hiding overflow on the x-axis. One might expect that adding these properties:

.overflow {
  overflow-x: hidden;
  overflow-y: visible;
}

to a block-level element would suffice, but due to some CSS implementation quirks as documented here, this doesn't actually work. What ends up happening is that the calculated value of overflow-y becomes auto, while overflow-x remains hidden.

Is there any other way to accomplish the behaviour I want?

Just for a bit more detail, I have a horizontal list of items that I'm using custom buttons to scroll through. The width of the containing element of the list is much lower than the width of the list. I don't want a scroll bar to appear, because I'm using my own custom buttons to navigate through the list, and so I need for overflow-x to be hidden. On hover, I want to apply a transform to scale up the size of the elements, but I want the elements to be able to overflow outside of the top and bottom of the containing element, thus the need for overflow-y to be visible.

tabdulla
  • 505
  • 1
  • 5
  • 14

1 Answers1

7

If you don't mind adding some extra markup , there seems to be an easy solution.

You'll just have to use two div, one for each overflow.

For example:

<div class="outer">
    <div class="middle">
         <!-- your content here -->
    </div>
</div>

And the following markup:

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

Seems to do the job.

A little example here.

Py.
  • 3,499
  • 1
  • 34
  • 53
  • 3
    Actually, this doesn't work. The computed value of overflow-y for the middle div will end up being auto, so it ends up still clipping the overflow. – tabdulla May 09 '12 at 20:05
  • In what browser does it clips it? For me (at least in the fiddle i posted), I see a 60*80 black background. So overflow-x is hidden (only 60px are shown) and overlfow-y is visible (hence the 80px). – Py. May 09 '12 at 20:10
  • And after further testing, I see a real difference if the overflow from middle is moved to outer or if I change the value of overflow-y to hidden/scroll. So any screen/further code sample would help :) – Py. May 09 '12 at 20:38
  • So, it turns out your solution works, but not with my transform: scale. I didn't think that detail would matter, but apparently it does. – tabdulla May 10 '12 at 00:50
  • Could you then accept the answer or edit your question with the appropriate infos ? :) – Py. May 10 '12 at 05:36
  • Accepted. I actually managed to get it working by putting overflow-x: hidden on the body, but that's very specific to my situation. Your solution should work in all other cases. Cheers! – tabdulla May 10 '12 at 18:48
  • Nice that you got it working anyway ;) – Py. May 10 '12 at 19:20