How do I remove the horizontal scrollbar in a div?

overflow-x: hidden;

---

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

The code should be:

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

---

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.

---

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;}

---

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

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

---

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;
}

---

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;
}

---

To remove the horizontal scroll bar, use the following code. It 100% works.

html, body {
    overflow-x: hidden;
}

---

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

overflow: auto;

and it will only show scrollbars when needed.

See The CSS Overflow Property

---

overflow-x:hidden;

However, it may happen that your content on the website may not show. So best to inspect element and check the widths of your divs or sections, and remove any right/left margins it may have put in extra. Much better solution

---

Removes the HORIZONTAL scrollbar while ALLOWING for scroll and NOTHING more.

&::-webkit-scrollbar:horizontal {
  height: 0;
  width: 0;
  display: none;
}

&::-webkit-scrollbar-thumb:horizontal {
  display: none;
}

---

Use:

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; }

---

To hide the scrollbar, but keep the behaviour.

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

There are limitations to this.

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

---

Use This chunk of code..

.card::-webkit-scrollbar {
  display: none;
}

---

Hide Scrollbars

step 1:

step 2:

 overflow: hidden; /* Hide scrollbars */

now go to add file .css in project and include file

---

I had been having issues where I was using

overflow: none;

But I knew CSS didn't really like it and it didn’t work 100% for 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;

---