How do I remove the horizontal scrollbar in a div?

Question

When I set overflow:scroll, I get horizontal and vertical scrollbars.

Is there a way to remove the horizontal scrollbar in a div?

Answer 1

overflow-x: hidden;

Answer 2

Don't forget to write overflow-x:hidden;

code should be

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

Answer 3

With overflow-y:scroll, the vertical scrollbar will always be there even if it is not needed. If you want y-scrollbar to be visible only when it is needed, I found this works:

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

Answer 4

CSS

overflow-y: scroll;

See it on jsFiddle.

Notice if you remove the -y from the overflow-y property, the horizontal scroll bar is shown.

Answer 5

Add this code to your CSS. It will disable the horizontal scrollbar.

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

Answer 6

No scroll://without specifying x or y

.your-class {
   overflow: hidden; 
}

Remove horizontal scroll:

.your-class {
   overflow-x: hidden; 
}

Remove vertical scroll:

.your-class {
   overflow-y: hidden; 
}

Answer 7

If you don't have anything overflowing horizontally, you can also just use

overflow:auto;

and it will only show scrollbars when needed.

http://css-tricks.com/the-css-overflow-property/

Answer 8

To hide the horizontal scrollbar, we can just select the scrollbar of the required div and set it to display: none;

One thing to note is that this will only work for Webkit Based Browsers (like Chrome) as there is no such option available for Mozilla.

In order to select the scrollbar, use ::-webkit-scrollbar

So the final code will be like this:

div::-webkit-scrollbar{
  display: none;
}

Answer 9

To remove horizontal scroll bar, use this code. it 100% works

html, body {overflow-x: hidden;}

Answer 10

overflow: auto;

This will show the vertical scrollbar and only if there is a vertical overflow, otherwise, it will be hidden.

If you have both an x and y overflow, then both x and y scrollbars will be shown.

To hide the x (horizontal) scrollbar, even if present simply add:

overflow-x: hidden;

body { font-family: sans-serif; }
.nowrap{
  white-space: nowrap;
 }

.container{ 
  height:200px; 
  width: 300px; 
  padding 10px; 
  border: 1px solid #444;
  
  overflow: auto;
  overflow-x: hidden;
 }

<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

Answer 11

I had been having issues where i was using

overflow:none;

But knew CSS didn't really like it and it din't work 100% of how I wanted it to.

However this is a perfect solution as none of my content is supposed to be larger than intended and this has fixed the issue i had.

overflow:auto;