Propriedade Overflow-X
Última atualização: 2026-09-13
overflow-x Propriedade Overflow-X
A propriedade overflow-x controla especificamente como o conteúdo que transborda um contêiner horizontalmente é tratado e aceita os mesmos valores de overflow. O valor padrão, visible, permite que o estouro seja exibido. É comumente usada para desativar a rolagem horizontal da página ou para tornar uma região rolável apenas horizontalmente.
| 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-x: visible | hidden | clip | scroll | auto;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
visible | hidden | scroll | auto | Palavra-chave | Tratamento do estouro horizontal. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overflow-x | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10 |
| Suportado em todos os principais navegadores | |||||
Dica： Definir overflow-x:hidden no body impede barras de rolagem horizontal na página.
❓ Perguntas Frequentes
QComo evito a rolagem horizontal em uma página?
ADefinir overflow-x:hidden no html ou no body recorta o estouro, mas isso trata apenas o sintoma. É melhor encontrar a causa raiz: verifique se um elemento é mais largo que a viewport, por exemplo uma width acima de 100%, palavras longas, texto sem quebra ou elementos posicionados, e use as ferramentas de desenvolvimento para identificar qual filho do body estoura. Corrigir a origem é mais confiável do que adicionar overflow-x:hidden.
QQual é a diferença entre overflow-x e overflow?
Aoverflow é o atalho que define tanto o comportamento horizontal quanto o vertical de uma vez; overflow-x define apenas a direção horizontal. Os dois eixos podem ser definidos separadamente, por exemplo overflow-x:hidden; overflow-y:auto. Uma ressalva: quando um eixo é visible e o outro é hidden, auto ou scroll, o valor visible é alterado à força para auto, então você não pode manter um estouro visible real no outro eixo ao mesmo tempo.
QPor que o overflow-x:hidden às vezes não funciona?
ACausas comuns: primeiro, html e body rolam de forma diferente, então defina em ambos, em html e body, ou apenas em html; segundo, um elemento pai não tem restrição de largura, então um filho mais largo que o pai ainda estoura; terceiro, quando o outro eixo é visible, o valor visible conflitante é reescrito para auto. Definir em html,body juntos e corrigir a origem do estouro é o caminho confiável.
QComo crio uma lista de imagens rolável horizontalmente?
ADê ao contêiner overflow-x:auto com white-space:nowrap, ou display:flex, e larguras fixas aos filhos, e a linha rolará horizontalmente. Com flex, adicione flex-shrink:0 aos itens para que não sejam comprimidos. Em dispositivos móveis, associe-o a -webkit-overflow-scrolling:touch para uma rolagem inercial suave e considere scroll snap para uma sensação mais polida, o que faz a lista parecer nativa em dispositivos de toque.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
