Question

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.

Answer 1

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.