Propriedade Overflow
Última atualização: 2026-09-13
overflow Propriedade Overflow
A propriedade overflow controla o que acontece quando o conteúdo excede os limites do contêiner e é a ferramenta central para lidar com conteúdo transbordante. O valor padrão, visible, deixa o conteúdo transbordante aparecer; hidden o corta; scroll sempre exibe barras de rolagem; e auto mostra barras de rolagem apenas quando necessário, que é o valor mais usado.
| Categoria | |
|---|---|
| Valor Inicial | visible |
| Herdado | Não |
| Aplica-se A | block-container |
| Tipo de Animação | discrete |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
overflow: visible | hidden | clip | scroll | auto;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
visible | hidden | scroll | auto | Palavra-chave | Como o conteúdo transbordante é tratado. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| Suportado em todos os principais navegadores | |||||
Dica： overflow:hidden ou auto cria um novo contexto de formatação de bloco (BFC), que também pode ser usado para limpar floats.
❓ Perguntas Frequentes
QQual é a diferença entre overflow:auto e overflow:scroll?
Ascroll sempre mostra barras de rolagem, mesmo quando o conteúdo não transborda, e reserva espaço para a barra em ambas as direções. auto mostra barras de rolagem apenas quando o conteúdo realmente transborda e as esconde por completo caso contrário, o que parece mais limpo. Para a maioria dos casos de uso, auto é recomendado. Observe que ambos confinam o conteúdo à caixa, então elementos dentro da área rolável não podem rolar além do pai, e nenhum dos dois impede o scroll da página em si.
QComo faço o conteúdo rolar quando transborda?
APrimeiro dê ao contêiner uma altura definida usando height ou max-height, depois defina overflow:auto ou scroll. Quando o conteúdo excede o tamanho do contêiner, ele pode ser rolado para visualização, por exemplo .list { height:300px; overflow:auto; }. Para rolagem de página inteira, não restrinja overflow em html ou body, ou a página perderá seu comportamento de rolagem padrão. Também certifique-se de que a largura do contêiner está restrita, já que o transbordamento horizontal é um efeito colateral comum.
QPor que overflow:hidden limpa floats?
AQuando overflow é definido como hidden, auto, scroll ou clip, o elemento cria um contexto de formatação de bloco (BFC). Um BFC leva em conta a altura de seus filhos flutuantes, corrigindo o problema do pai colapsado. É por isso que adicionar overflow:hidden ao pai de um float é uma técnica clássica de limpeza; apenas tenha em mente que ele também corta qualquer conteúdo transbordante, o que pode cortar dropdowns ou tooltips que se estendem além da caixa.
QQual é a diferença entre overflow:hidden e overflow:visible?
Avisible, o padrão, renderiza o conteúdo transbordante fora da caixa; não afeta o layout, mas pode cobrir elementos vizinhos. hidden corta o transbordamento para que o conteúdo fique invisível e não possa ser rolado para visualização. hidden é comumente usado para criar um BFC, para cortar conteúdo dentro de cantos arredondados via border-radius, e para esconder transbordamento decorativo, enquanto visible é melhor deixado para casos onde o transbordamento realmente deve escapar do contêiner.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
