Setting overflow-x: hidden adds a vertical scrollbar

When I specify overflow-x: hidden on an element which overflows both horizontally and vertically, the element gets a vertical scroll bar in addition to hiding the horizontally overflowing content. I have tried adding overflow-y: visible and even just overflow: visible, to no effect.

Am I misunderstanding what these properties do? I would think that overflow-x should not affect the vertical overflow at all.

This has happened on every browser I've tried.

Here's a snippet which demonstrates the effect. I'm using <pre> tags because they're an easy way to create overflowing content, but it seems to happen with any tag.

pre {
  height: 40px;
  width: 150px;
  margin-bottom: 50px; /* We need this so they don't overlap. */
}

#x-hidden {
  overflow-x: hidden;
}

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

#visible {
  overflow: visible;
  overflow-x: hidden;
}

<pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="x-hidden">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="y-visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

The W3C spec says:

> The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

But this makes no mention of the case when overflow-x or overflow-y is set to hidden, which to me implies that this combination is indeed meant to be possible.

Check out this answer to a related question: https://stackoverflow.com/a/6433475/3583023

It explains why

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

renders as

el {
  overflow-x: hidden;
  overflow-y: auto;
}

which usually renders the same as

el {
  overflow-x: hidden;
  overflow-y: scroll;
}

because the auto value of overflow-y is scroll in most browsers.

So, in order to achieve this effect, we can't use the overflow-x/overflow-y properties. I've experimented with the clip property as a potential alternative, but no luck so far: http://jsfiddle.net/qvEq5/

Try setting your height. Either make it like 100%, or auto check this

jsfiddle

    height: auto;

Just an hour ago I had the similar problem except the problem occurred when I had specified overflow's value as auto. I didn't use overflow-x or overflow-y, I just needed it to fully contain my two lists that were floating on opposite ends.

What worked for me was that I changed overflow's value to hidden. Try that. I had set the max-width to 100% and instead of specifying height, I just used overflow: hidden.

Hope that helps.

Give this a try:

height: auto;
width: 100px;
overflow: hidden;

Should keep the element at 100px wide, and allow it to expand vertically based on its content (without scrollbars).

Firstly, this fiddle shows the problem which you describe.

As yet, I don't know how to get around this, but it seems like the spec hints to this here:

> The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as > their specified values, except that some combinations with ‘visible’ > are not possible: if one is specified as ‘visible’ and the other is > ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

Just use overflow: hidden on a wrapper div with size constraints. Excuse my formatting in a bit of a rush today.

<!DOCTYPE html>
<html>
<head>
<style>
div.hidden 
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>

<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>

See it in action here: http://jsfiddle.net/4PZC9/

Try setting the display property? The overflow declaration works on block level elements!

Maybe you misunderstood something, I didn't unsdertood the question... or the problem is not in the overflow settings.

Overflow: auto will add the scrollbar only if needed (content bigger than container). Òverflow: visible will add the scrollbar. Òverflow: hidden will NOT add the scrollbar.

I understand that you want the x-content to be hidden, so overflow-x: hidden, but from your question it seems to me that don't want the vertical scrollbar to see the vertically overflowed content.

Maybe the problem is that is set a fixed height (or max-height) for the container and the content is bigger. Remove the height (or max height) and you'll avoid the vertical scrollbar.

...or as maybe I said, just didn't understood what is the desired effect.

Try this,

height: auto;
overflow:hidden;

Cheers.

Reading you question... I don't see any problem...

> Whe I specify overflow-x:hidden; on an element, it adds a vertical scroll bar.

If it overflows in it's height (as you just said it does), then that's quite normal.

> I have tried adding overflow-y:visible; and even just overflow:visible, to no effect.

Well... That's normal, as you're telling it to show a vertical scrollbar, wich there already is.

As kuloir said: X = horizontal; Y = vertical.