In a div, how can I eliminate the horizontal scrollbar?

Problem

I get horizontal and vertical scrollbars when I use overflow: scroll.

Is it possible to get rid of the horizontal scrollbar in a div?

Asked by Ravi

Solution #1

overflow-x: hidden;

Answered by basarat

Solution #2

Don’t forget to include overflow-x: hidden in your code.

The code should be as follows:

overflow-y: scroll;
overflow-x: hidden;

Answered by Ajit Bhandari

Solution #3

overflow-y: scroll;

Check it out on jsFiddle.

When you remove the -y from the overflow-y attribute, you’ll notice that the horizontal scroll bar appears.

Answered by alex

Solution #4

The vertical scrollbar will always be present with overflow-y: scroll, even if it is not required. If you just want the y-scrollbar to appear when it’s needed, I found that this works:

.mydivclass {overflow-x: hidden; overflow-y: auto;}

Answered by Pasha

Solution #5

This code should be added to your CSS. The horizontal scrollbar will be disabled.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Answered by vasanth

Post is based on https://stackoverflow.com/questions/4405954/how-do-i-remove-the-horizontal-scrollbar-in-a-div