Como faço para remover a barra de rolagem horizontal em uma div?

Quando defino overflow: scroll, recebo barras de rolagem horizontais e verticais.

Existe uma maneira de remover a barra de rolagem horizontal em uma div?

overflow-x: hidden;

Não se esqueça de escrever overflow-x: hidden;

O código deve ser:

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

Com overflow-y: scroll, a barra de rolagem vertical estará sempre lá, mesmo que não seja necessária. Se você deseja que a barra de rolagem y fique visível apenas quando necessário, achei que isso funciona:

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

CSS

overflow-y: scroll;

Veja no jsFiddle .

Observe que, se você remover o -yda overflow-ypropriedade, a barra de rolagem horizontal será mostrada.

Adicione este código ao seu CSS. Desabilitará a barra de rolagem horizontal.

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

Sem rolagem (sem especificar x ou y):

.your-class {
   overflow: hidden;
}

Remova a rolagem horizontal:

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

Remova a rolagem vertical:

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

Para ocultar a barra de rolagem horizontal, podemos apenas selecionar a barra de rolagem da div desejada e configurá-la como display: none;

Uma coisa a observar é que isso funcionará apenas para navegadores baseados no WebKit (como o Chrome), pois não existe essa opção disponível para o Mozilla.

Para selecionar a barra de rolagem, use ::-webkit-scrollbar

Portanto, o código final será assim:

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

Para remover a barra de rolagem horizontal, use o seguinte código. Funciona 100%.

html, body {
    overflow-x: hidden;
}

Se você não tem nada transbordando horizontalmente, também pode usar

overflow: auto;

e só mostrará barras de rolagem quando necessário.

Consulte Propriedade CSS Overflow

Usar:

overflow: auto;

Isso mostrará a barra de rolagem vertical e somente se houver um estouro vertical, caso contrário, ela ficará oculta.

Se você tiver um excesso de xey, as barras de rolagem xey serão mostradas.

Para ocultar a barra de rolagem x (horizontal), mesmo se presente, adicione:

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>

Para esconder o scrollbar, mas manter o comportamento.

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

Existem limitações para isso.

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

Use este pedaço de código ..

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

Eu estava tendo problemas em que estava usando

overflow: none;

Mas eu sabia que o CSS não gostava muito e não funcionava 100% da maneira que eu queria.

No entanto, esta é uma solução perfeita, pois nenhum dos meus conteúdos deve ser maior do que o pretendido e isso corrigiu o problema que eu tinha.

overflow: auto;