Setting overflow-x: hidden adds a vertical scrollbar [duplicate]

Answer 1

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

Answer 2

Try this,

height: auto;
overflow:hidden;

Cheers.

Answer 3

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

jsfiddle

    height: auto;

Answer 4

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’.

Answer 5

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.

Answer 6

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.