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

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