Docs executáveis de CSS: Overflow CSS

Q: Qual a diferença entre overflow auto e scroll?

scroll sempre reserva as barras de rolagem, mesmo quando o conteúdo cabe. auto só mostra a barra quando o conteúdo é maior que a caixa, que é o que você normalmente quer.

Q: Como fazer uma div com rolagem?

Limite o tamanho e permita a rolagem: max-height: 300px; overflow-y: auto;. Sem um limite de height ou max-height, a div cresce com o conteúdo e nunca transborda.

Q: Por que overflow-x: hidden também cria uma barra de rolagem vertical?

Se um eixo é hidden, scroll ou auto, um valor visible no outro eixo é calculado como auto. Use overflow-x: clip, que não cria um contêiner de rolagem e deixa o outro eixo visível.

Q: Como pôr reticências (...) em um texto que transborda?

Para uma linha: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; em um elemento com largura limitada. Para várias linhas, use display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

O que o overflow faz

Quando o conteúdo é maior que a caixa (uma altura fixa, uma palavra longa, uma tabela larga), ele transborda. A propriedade overflow decide o que acontece com o excesso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Valor	O que você vê	Contêiner de rolagem
`visible` (padrão)	O conteúdo vaza da caixa e fica por cima do que vem depois	Não
`hidden`	Cortado na borda do padding, sem barras de rolagem (script ainda consegue rolar)	Sim
`clip`	Cortado, e sem rolagem nenhuma, nem por script	Não
`scroll`	Sempre mostra barras de rolagem, mesmo que o conteúdo caiba	Sim
`auto`	Barras de rolagem só quando o conteúdo não cabe	Sim

No macOS e nos celulares, as barras de rolagem ficam por cima do conteúdo e somem, então scroll e auto podem parecer iguais até você rolar.

Criar uma caixa com rolagem

Uma caixa só transborda se algo limita o tamanho dela. Um height ou max-height, mais overflow-y: auto, transforma uma lista longa em um painel com rolagem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

max-height é melhor que height aqui: uma lista curta continua curta, e só uma lista longa rola. Uma região com rolagem sem nenhum conteúdo focável dentro deve receber tabindex="0", para que quem usa teclado também consiga rolá-la.

overflow-x e overflow-y

Os dois eixos podem ser definidos separadamente. O uso comum é uma tabela larga que rola para o lado dentro do contêiner, em vez de alargar a página inteira:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Uma regra para lembrar: se um eixo é hidden, scroll ou auto, um valor visible no outro eixo vira auto. Então overflow-x: hidden sozinho pode criar uma barra de rolagem vertical inesperada. overflow-x: clip não tem esse efeito:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Cortar texto com reticências

text-overflow: ellipsis troca o fim cortado de uma linha por "…". Ele precisa de três coisas juntas: uma largura limitada, um texto que não pode quebrar linha e o overflow escondido:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

O line clamp com prefixo -webkit- funciona no Chrome, no Firefox e no Safari. Os leitores de tela continuam lendo o texto completo, então as palavras cortadas não se perdem para eles.

Efeitos colaterais do overflow

Definir overflow com qualquer valor que não seja visible ou clip muda mais do que o corte:

Ele contém floats e as margens dos filhos. O elemento forma um novo contexto de formatação de bloco, então cresce para envolver filhos com float. display: flow-root faz o mesmo sem cortar nada.
Ele quebra o position: sticky abaixo dele. Um filho sticky gruda no contêiner de rolagem mais próximo; se esse contêiner não rola, nada gruda.
Ele corta filhos com posição absoluta (quando o elemento que transborda também é o bloco que os contém), incluindo dropdowns e tooltips, e corta também as sombras dos filhos.

Esconder a barra de rolagem

Você pode manter uma caixa com rolagem e esconder a barra com scrollbar-width: none. Use com moderação: sem a barra, muitos leitores não percebem que existe mais conteúdo. scrollbar-gutter: stable faz o contrário: reserva o espaço da barra para o conteúdo não se deslocar quando uma barra aparece.

Erros comuns

Esperar overflow sem limite de tamanho. Uma caixa sem height ou max-height cresce em vez de transbordar.
overflow: hidden no body para "consertar" a rolagem horizontal. Encontre o elemento largo demais (muitas vezes um width fixo, uma URL longa ou um 100vw com barra de rolagem).
Reticências sem white-space: nowrap. O texto quebra linha, então nada transborda na horizontal e nenhuma reticência aparece.
overflow-x: hidden criando uma barra de rolagem vertical. Use clip.
Um dropdown cortado pelo card. O overflow: hidden do card o corta; mude a regra de overflow de lugar ou renderize o dropdown fora dele.

Perguntas frequentes

O que overflow: hidden faz?

Corta o conteúdo que não cabe na caixa do padding do elemento, sem barras de rolagem. A parte escondida ainda pode ser alcançada por script ou quando algo dentro dela recebe foco.

Qual a diferença entre overflow auto e scroll?

scroll sempre reserva as barras de rolagem, mesmo quando o conteúdo cabe. auto só mostra a barra quando o conteúdo é maior que a caixa, que é o que você normalmente quer.

Como fazer uma div com rolagem?

Limite o tamanho e permita a rolagem: max-height: 300px; overflow-y: auto;. Sem um limite de height ou max-height, a div cresce com o conteúdo e nunca transborda.

Por que overflow-x: hidden também cria uma barra de rolagem vertical?

Se um eixo é hidden, scroll ou auto, um valor visible no outro eixo é calculado como auto. Use overflow-x: clip, que não cria um contêiner de rolagem e deixa o outro eixo visível.

Como pôr reticências (...) em um texto que transborda?

Para uma linha: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; em um elemento com largura limitada. Para várias linhas, use display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Conceitos relacionados