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

User · Answer

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

User · Answer

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

User · Answer

Use This chunk of code     card  -webkit-scrollbar     display  none

User · Answer

Removes the HORIZONTAL scrollbar while ALLOWING for scroll and NOTHING more   amp   -webkit-scrollbar horizontal     height  0    width  0    display  none      amp   -webkit-scrollbar-thumb horizontal     display  none

User · Answer

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

User · Answer

Don t forget to write overflow-x  hidden   The code should be   overflow-y  scroll  overflow-x  hidden

User · Answer

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

User · Answer

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

User · Answer

overflow-x  hidden

User · Answer

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

User · Answer

To remove the horizontal scroll bar  use the following code  It 100  works   html  body       overflow-x  hidden

User · Answer

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

User · Answer

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     x000D   x000D  body   x000D      font-family  sans-serif  x000D    x000D   x000D   nowrap   x000D      white-space  nowrap  x000D    x000D   x000D   container   x000D      height  200px  x000D      width  300px  x000D      padding 10px  x000D      border  1px solid  444  x000D   x000D      overflow  auto  x000D      overflow-x  hidden  x000D    x000D   lt div class  container  gt  x000D   lt ul gt  x000D     lt li gt Item 1 lt  li gt  x000D     lt li gt Item 2 lt  li gt  x000D     lt li gt Item 3 lt  li gt  x000D     lt li gt Item 4 lt  li gt  x000D     lt li gt Item 5 lt  li gt  x000D     lt li gt Item 6 lt  li gt  x000D     lt li gt Item 7 lt  li gt  x000D     lt li class  nowrap  gt Item 8 and some really long text to make it overflow horizontally  lt  li gt  x000D     lt li gt Item 9 lt  li gt  x000D     lt li gt Item 10 lt  li gt  x000D     lt li gt Item 11 lt  li gt  x000D     lt li gt Item 12 lt  li gt  x000D     lt li gt Item 13 lt  li gt  x000D     lt li gt Item 14 lt  li gt  x000D     lt li gt Item 15 lt  li gt  x000D     lt li gt Item 16 lt  li gt  x000D     lt li gt Item 17 lt  li gt  x000D   lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Add this code to your CSS  It will disable the horizontal scrollbar   html  body       max-width  100       overflow-x  hidden

User · Answer

Hide Scrollbars step 1  go to any browser for example Google Chrome  click on keyboard ctrl Shift i inspect use open tools Developer  step 2  Focused mouse on the div and change style div use try this   overflow  hidden     Hide scrollbars     now go to add file  css in project and include file

[html] How do I remove the horizontal scrollbar in a div?

Examples related to html

Examples related to css

Examples related to overflow

Examples related to horizontal-scrolling