Propriedade Overflow-Y
Última atualização: 2026-09-13
overflow-y Propriedade Overflow-Y
A propriedade overflow-y controla especificamente como o conteúdo que transborda um contêiner verticalmente é tratado e aceita os mesmos valores de overflow. O valor padrão, visible, permite que o estouro seja exibido. É o controle de overflow mais usado e é frequentemente combinado com max-height para regiões roláveis de altura fixa.
| Categoria | |
|---|---|
| Valor Inicial | visible |
| Herdado | Não |
| Aplica-se A | block-container |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
overflow-y: visible | hidden | clip | scroll | auto;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
visible | hidden | scroll | auto | Palavra-chave | Tratamento do estouro vertical. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow-y | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| Suportado em todos os principais navegadores | |||||
Dica： overflow-y:auto oculta a barra de rolagem quando o conteúdo não estoura e a mostra apenas quando estoura, o que é mais agradável que scroll.
❓ Perguntas Frequentes
QComo faço o conteúdo de uma div rolar quando ele estoura?
ADê à div um limite de altura mais overflow-y:auto, por exemplo .list { max-height:300px; overflow-y:auto; }. Quando o conteúdo excede a altura, aparece uma barra de rolagem vertical; quando não excede, nenhuma barra aparece. Prefira max-height a height para que conteúdos curtos não deixem espaço vazio. Este é o padrão para janelas de chat, listas de notificações e painéis roláveis semelhantes, e degrada graciosamente, já que o contêiner simplesmente cresce quando o overflow não é suportado.
QO que faz overflow-y:hidden?
AO conteúdo que transborda verticalmente é recortado e oculto, e os usuários não podem rolar para ver a parte cortada. Serve para áreas de exibição fixas onde o conteúdo com certeza cabe, como um banner de altura fixa, ou regiões com rolagem controlada por JS. Observe que desativa a rolagem completamente: se você quer apenas ocultar a barra de rolagem mantendo a rolagem, para uma barra de rolagem personalizada, overflow-y:hidden não serve; você precisa de um truque com contêiner visible e scroll.
QQual é a diferença entre overflow-y:auto e overflow-y:scroll?
Ascroll sempre mostra uma barra de rolagem vertical, mesmo quando o conteúdo não estoura, então o trilho da barra de rolagem fica reservado permanentemente. auto mostra a barra de rolagem apenas quando o conteúdo estoura e a oculta caso contrário. Visualmente, auto é mais limpo, sem trilho restante, e por isso é recomendado para layouts do dia a dia. scroll serve para casos em que você quer sinalizar que a região rola, como painéis de tutoriais.
QÉ possível definir overflow-x e overflow-y juntos?
ASim, mas com uma regra: quando ambos são visible, o conteúdo estoura normalmente; assim que um eixo não é visible, o visible do outro eixo é reescrito automaticamente para auto. Por exemplo, overflow-x:hidden; overflow-y:visible na verdade se torna overflow-y:auto. É por isso que você pode ver barras de rolagem auto inesperadas após definir um único eixo, e também significa que não é possível combinar um estouro vertical visível de verdade com um estouro horizontal recortado.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
