CSS Academy · Aula

Overflow: Scroll, Clip e Auto

Controle o que acontece quando o conteúdo excede seu contêiner usando propriedades de overflow.

Overflow: Scroll, Clip e Auto é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 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.

O que é overflow

O overflow ocorre quando o conteúdo de um elemento é maior que suas dimensões definidas. A propriedade overflow controla o que acontece com esse conteúdo excedente.

overflow: visible (Padrão)

Por padrão, o conteúdo transborda e fica visível fora da caixa do elemento. Isso pode fazer o conteúdo se sobrepor aos elementos irmãos ou escapar da área visível.

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

overflow: hidden recorta qualquer conteúdo que ultrapasse os limites do elemento. O conteúdo recortado não fica acessível nem pode ser rolado.

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

overflow: scroll sempre exibe barras de rolagem, mesmo quando o conteúdo cabe. Use-o quando quiser uma interface consistente independentemente do tamanho do conteúdo.

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

overflow: auto exibe barras de rolagem somente quando o conteúdo realmente transborda. Geralmente, essa opção é preferível a scroll para evitar trilhas de rolagem desnecessárias.

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

overflow: clip é semelhante a hidden, mas mais restritivo: não cria um contexto de formatação de bloco e não pode ser rolado por JavaScript. É ideal para recortes seguros em termos de desempenho.

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x e overflow-y

Controle cada eixo independentemente. Um padrão comum permite a rolagem horizontal para conteúdos largos, como código ou tabelas:

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

Padrão de contêiner rolável

Para criar um contêiner rolável, precisa de uma altura fixa e de overflow: auto ou scroll:

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

Contexto de formatação de bloco gerado por overflow

Definir overflow com qualquer valor diferente de visible cria um contexto de formatação de bloco (BFC). Isso contém os elementos flutuantes internos e impede que o colapso das margens escape do contêiner.

Encadeamento da rolagem

Quando um contêiner rolável chega ao seu limite, os eventos de rolagem podem ser "encadeados" ao elemento pai. Use overscroll-behavior: contain para impedir isso.

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow vs overflow

text-overflow: ellipsis diz respeito ao texto dentro de um elemento e exige overflow: hidden + white-space: nowrap para funcionar. overflow controla o comportamento do próprio elemento quando há conteúdo excedente.

Verificação rápida

Qual valor de overflow exibe barras de rolagem somente quando o conteúdo realmente excede o espaço disponível?

Recapitulação

overflow: hidden recorta o conteúdo. overflow: auto adiciona barras de rolagem somente quando necessário (preferível). overflow: scroll sempre exibe barras de rolagem. overflow: clip recorta o conteúdo sem criar um novo contexto de formatação. Use overflow-x/y para controlar cada eixo separadamente.

Perguntas Frequentes

A aula “Overflow: Scroll, Clip e Auto” é grátis?

Sim — o texto completo de “Overflow: Scroll, Clip e Auto” é 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: Scroll, Clip e Auto”?

Controle o que acontece quando o conteúdo excede seu contêiner usando propriedades de overflow. 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 3 de 4.

Quanto tempo leva a aula “Overflow: Scroll, Clip e Auto”?

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

← Voltar para CSS Academy