CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

user_684890 0
Viewed 508062

Suppose you have some style and the markup:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}
<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

When you view this. The <ul> has a scroll bar at the bottom even though I've specified visible and hidden values for overflow x/y.

(observed on Chrome 11 and opera (?))

I'm guessing there must be some w3c spec or something telling this to happen but for the life of me I can't work out why.

JSFiddle

UPDATE:- I found a way to achieve the same result by adding another element wrapped around the ul. Check it out.

overflow css html
9 Answers

There is now a new way of addressing this issue - if you remove position: relative from the container which needs to have the overflow-y visible, you can have overflow-y visible and overflow-x hidden, and vice versa (have overflow-x visible and overflow-y hidden, just make sure the container with the visible property is not relatively positioned).

See this post from CSS Tricks for more details - it worked for me: https://css-tricks.com/popping-hidden-overflow/

user_82815130

For my use case, adding overflow-x:visible; overflow-y:clip onto the div that has the overflow seems to give me the desired effect of hiding overflow on the Y axis while not giving me a scrollbar on the X axis (i have a carousel slider that was loading images full-size before scaling them back down again, and these images were taking up 75% of the page height on load, hence wanting no overflow-y).

No parent wrapper div was needed, just a fixed height set on the overflowing element. I realise this solution may not work for everyone, but it could certainly help some.

user_22842880

I was facing the same issue, the following solution worked (styles are applied to the parent block)

overflow-y: visible;
overflow-x: clip;
user_147141680

A small "hack" that works very well if you only want the first row visible (but still need overflow):

set gap really high so you are sure the second row is pushed out of the screen - eg:

gap: 10000rem;

It is really hacky but works great for something like a desktop nav with menus that need to overflow...

user_123540820
Related