Carregando...

Overflow em CSS

Pode dar a uma caixa um tamanho fixo. E se o conteúdo for mais alto ou mais largo do que essa caixa? overflow decide se o excesso extravasa, é cortado ou fica com scroll.

Palavras-chave num relance

📊 Valores comuns de overflow

Valor Significado do dia a dia
visible (predefinição) O conteúdo extra pode sair da caixa
hidden O excesso é cortado; sem barras de deslocamento
scroll Mostram-se barras (muitas vezes mesmo sem necessidade)
auto As barras aparecem só quando o conteúdo extravasa

Predefinição: o conteúdo pode extravasar

Com overflow: visible (predefinição), conteúdo longo pode pintar fora das arestas da caixa.

Overflow visível (predefinição)

css
CSS Code 
.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Cortar com hidden

overflow: hidden corta o que não cabe. Útil para arestas limpas — mas o utilizador não pode fazer scroll do resto.

Hidden corta o extravasamento

css
CSS Code 
.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Barras sempre com scroll

overflow: scroll torna a caixa deslocável e costuma reservar espaço de barra mesmo quando o conteúdo cabe.

Scroll sempre

css
CSS Code 
.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}

Auto — scroll só quando preciso

overflow: auto é uma escolha calma do dia a dia para painéis: as barras aparecem no extravasamento e muitas vezes ficam fora do caminho quando não é preciso.

Auto quando preciso

css
CSS Code 
.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}

Controlar um eixo

Use overflow-x e overflow-y quando o comportamento horizontal e vertical devem diferir — por exemplo, scroll vertical e cortar extravasamento lateral.

Scroll vertical, corte horizontal

css
CSS Code 
.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}

Hábito prático de painel

Dê à caixa uma altura real (ou max-height) e escolha auto para áreas de conteúdo legíveis e com scroll.

Painel de notas com scroll

css
CSS Code 
.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}

Experimente você

  1. Faça uma caixa com width e height curto e cole vários parágrafos.
  2. Alterne overflow entre visible, hidden, scroll e auto.
  3. Ponha overflow-x: hidden e overflow-y: auto numa linha larga de texto.
  4. Construa .note-panel com max-height e veja barras só quando preciso.
  5. Sem limite de altura (ou max-height), o overflow muitas vezes não tem o que restringir.

Erros comuns

  • Esperar efeitos de overflow sem altura ou largura limitadas
  • Usar scroll em todo o lado quando auto seria mais calmo
  • Confundir overflow (extravasamento da caixa) com text-overflow (reticências no texto — ferramenta posterior)
  • Cortar com hidden e esquecer que o utilizador pode precisar do resto
  • Assumir que overflow muda a conta de box-sizing (não muda)

Resumo

  • Overflow controla extravasamento, corte e scroll quando o conteúdo é maior que a caixa
  • A predefinição é visible; hidden corta; scroll oferece barras; auto quando preciso
  • Um tamanho limitado (height / max-height / width) costuma ser necessário para ver o efeito
  • overflow-x e overflow-y separam os eixos
  • Para muitos painéis, overflow: auto é um hábito calmo

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial