overflow: hidden scroll auto clip
Controle como o conteúdo que ultrapassa os limites é tratado com os valores hidden, scroll, auto e clip.
overflow: hidden scroll auto clip é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Recapitulação da propriedade overflow
overflow controla o que acontece quando o conteúdo de um elemento excede suas dimensões definidas. Ele se aplica aos dois eixos simultaneamente (ou use overflow-x/overflow-y para controlar cada eixo separadamente).
overflow: visible
visible (padrão) — o conteúdo é renderizado fora da caixa. Ele não cria um Contexto de formatação de bloco (BFC). Outros elementos podem se sobrepor ao conteúdo excedente.
overflow: hidden
hidden recorta o conteúdo no limite da caixa. Cria um BFC, que contém as flutuações e impede o colapso das margens. É o valor mais comum para contêineres de imagens com cantos arredondados.
<div class="rounded-card"></div>overflow: scroll
scroll sempre exibe barras de rolagem (nos eixos que oferecem suporte), independentemente de o conteúdo transbordar. É útil para interfaces consistentes nas quais o espaço reservado para as barras de rolagem deve estar sempre presente para evitar deslocamentos do layout.
<div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>overflow: auto
auto exibe barras de rolagem somente quando o conteúdo realmente transborda. É preferível a scroll para a maioria dos contêineres roláveis, pois evita a renderização desnecessária de barras de rolagem.
<div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>overflow: clip
clip recorta o conteúdo como hidden, mas NOT cria um BFC. Isso significa que não afeta a contenção de flutuações nem o colapso das margens. Use-o quando quiser recortar o conteúdo sem os efeitos colaterais de um BFC.
<div class="decorative-overflow"><div class="deco"></div></div>overflow-x e overflow-y
Controle cada eixo de forma independente. Um padrão muito comum é usar rolagem horizontal para conteúdos largos (tabelas, código), enquanto o excesso vertical permanece visível:
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>overflow e BFC
Definir overflow com qualquer valor diferente de visible e clip cria um Contexto de formatação de bloco. Isso contém as flutuações internas, impede que o colapso das margens se propague e estabelece um novo contexto de rolagem.
overflow: overlay (não padrão)
overflow: overlay desenha a barra de rolagem sobre o conteúdo, em vez de ocupar espaço no layout. Esse era um valor não padrão em alguns navegadores e está sendo descontinuado em favor da estilização moderna de barras de rolagem.
scrollbar-gutter
A nova propriedade scrollbar-gutter: stable reserva espaço para a barra de rolagem mesmo quando ela não é necessária, evitando deslocamentos do layout quando o conteúdo se torna rolável.
<div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>overflow e elementos filhos fixos
Um erro comum: um elemento filho com position: fixed dentro de um elemento com overflow: hidden se comportará como position: absolute — a posição fixa é relativa ao bloco contenedor, e overflow cria um novo contexto de empilhamento.
Verificação rápida
Qual valor de overflow recorta o conteúdo sem criar um Contexto de formatação de bloco?
Recapitulação
visible (padrão) permite o transbordamento. hidden recorta e cria um BFC. scroll sempre exibe barras de rolagem. auto exibe barras de rolagem apenas quando necessário (é o preferível). clip recorta sem criar um BFC. Use overflow-x/y para controlar cada eixo. Use scrollbar-gutter: stable para evitar deslocamentos do layout.
Perguntas Frequentes
A aula “overflow: hidden scroll auto clip” é grátis?
Sim — o texto completo de “overflow: hidden scroll auto clip” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “overflow: hidden scroll auto clip”?
Controle como o conteúdo que ultrapassa os limites é tratado com os valores hidden, scroll, auto e clip. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “overflow: hidden scroll auto clip”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- overflow: hidden scroll auto clip
- scroll-behavior: smooth
- scroll-snap-type e scroll-snap-align
- Estilização da Barra de Rolagem com ::-webkit-scrollbar