Geek asks and answers

Resolution of overflow on the y-axis when hiding overflow on the x-axis

I am trying to resolve overflow on the y axis by hiding overflow on the x axis. One would expect that adding these properties:

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

for a block-level element, that would be enough, but due to some hallmark CSS implementation, as documented here , this doesn't actually work. The result is that the calculated overflow-y value becomes automatic, and the overflow-x remains hidden.

Is there any other way to execute the behavior I want?

Just for more details, I have a horizontal list of items that I use custom buttons to scroll through. The width of the containing list item is much less than the width of the list. I don’t want the scroll bar to appear because I use my own custom buttons to navigate the list, so I need overflow-x to be hidden. When hovering over an object, I want to apply the transformation to increase the size of the elements, but I want the elements to overflow beyond the top and bottom contents of the containing element, so it is necessary that overflow-y is visible.

+5
source share
1 answer

If you don't mind adding extra markup, this seems like a simple solution.

div, .

:

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

:

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

, .

.

+6

More articles:


All Articles