Propriedade CSS overflow-x — Valores e Exemplos

A propriedade overflow-x controla o que acontece com o conteúdo que se estende além das bordas esquerda e direita de uma caixa. Você pode deixá-lo vazar, recortá-lo silenciosamente ou adicionar uma barra de rolagem horizontal.

overflow-x faz parte do shorthand CSS overflow e funciona em conjunto com overflow-y, que lida com o overflow vertical.

Informação

Se overflow-y estiver definido como hidden, scroll ou auto, e overflow-x estiver no seu valor padrão visible, os navegadores calculam automaticamente overflow-x como auto. Um valor visible não pode coexistir com um valor não-visible no eixo perpendicular.

Valor Inicial	`visible`
Aplica-se a	Contêineres de bloco, contêineres flex e contêineres grid.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	`object.style.overflowX = "scroll";`

Sintaxe

overflow-x: visible | hidden | scroll | auto | clip | initial | inherit;

Valores

Valor	Descrição
`visible`	O conteúdo não é recortado. Ele é renderizado além das bordas esquerda e direita da caixa de preenchimento. Este é o valor padrão.
`hidden`	O conteúdo é recortado nas bordas da caixa de preenchimento. Nenhuma barra de rolagem é exibida e o conteúdo recortado não está acessível.
`scroll`	O conteúdo é recortado e uma barra de rolagem horizontal é sempre exibida, mesmo que o conteúdo caiba.
`auto`	O conteúdo é recortado somente quando ultrapassa os limites. A barra de rolagem aparece apenas quando necessária. Preferível ao `scroll` na maioria dos casos.
`clip`	Semelhante ao `hidden`, mas também impede a rolagem programática via JavaScript (`scrollLeft`, `scroll()`). Compatível com navegadores modernos.
`initial`	Redefine a propriedade para seu valor padrão (`visible`).
`inherit`	Herda o valor do elemento pai.

Quando usar cada valor

visible — o padrão. Use quando o overflow é intencional, por exemplo, uma dica de ferramenta ou menu suspenso que deve se estender além do seu contêiner.
hidden — use para ocultar o overflow em componentes de design (cards de imagem, sliders) onde o conteúdo recortado nunca deve ser acessado. Esteja ciente de que qualquer conteúdo cortado fica inacessível para usuários de teclado e leitores de tela.
scroll — use quando você sempre quer uma barra de rolagem visível, como em visualizações de comparação lado a lado, para que o layout não mude quando o comprimento do conteúdo varia.
auto — a escolha mais comum para contêineres responsivos. A barra de rolagem aparece apenas quando o conteúdo realmente ultrapassa os limites, mantendo o layout limpo.
clip — use quando você quer o mesmo recorte rígido do hidden, mas também precisa impedir que o JavaScript role o elemento programaticamente (útil em certas técnicas de animação).

Padrões práticos

Um caso de uso comum é um contêiner de rolagem horizontal para conteúdo largo, como tabelas de dados ou blocos de código. Combine overflow-x: auto com white-space: nowrap (veja white-space) para manter o conteúdo em uma única linha:

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

Para que o reticências de text-overflow (…) funcione, você precisa de overflow-x: hidden (ou overflow: hidden) junto com white-space: nowrap:

.truncate {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Exemplos

overflow-x: scroll

O contêiner tem apenas 40 px de largura. Com scroll, uma barra de rolagem horizontal é sempre exibida para que os usuários possam acessar o restante do texto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Experimente Você Mesmo »

overflow-x: visible

Com visible, o texto é renderizado fora da caixa estreita e sobrepõe o conteúdo ao redor. Este é o comportamento padrão do navegador.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #cccccc;
        width: 40px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Experimente Você Mesmo »

overflow-x: hidden

Com hidden, o texto é recortado silenciosamente na borda direita. Nenhuma barra de rolagem é exibida e a parte recortada não pode ser acessada.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Experimente Você Mesmo »

overflow-x: auto

Com auto, a barra de rolagem aparece apenas quando o conteúdo realmente ultrapassa os limites — a opção mais limpa para a maioria dos layouts.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Todos os valores comparados

O exemplo abaixo coloca os quatro valores principais lado a lado para que você possa comparar seus efeitos visuais de uma vez.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #ccc;
        width: 50px;
        overflow-x: scroll;
      }
      div.hidden {
        background-color: #ccc;
        width: 50px;
        overflow-x: hidden;
      }
      div.auto {
        background-color: #ccc;
        width: 50px;
        overflow-x: auto;
      }
      div.visible {
        background-color: #ccc;
        width: 50px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Propriedades relacionadas

overflow — shorthand que define overflow-x e overflow-y ao mesmo tempo.
overflow-y — controla o comportamento de overflow vertical (superior/inferior).
overflow-wrap — especifica se o navegador pode quebrar palavras longas para evitar overflow horizontal.
text-overflow — controla como o texto que transborda é sinalizado ao usuário (por exemplo, reticências).
white-space — determina se o texto é quebrado; combinar white-space: nowrap com overflow-x é um padrão comum.

Prática

Qual valor de overflow-x sempre exibe uma barra de rolagem horizontal, mesmo quando o conteúdo cabe?

visibleautoscrollhidden