Resumo

A propriedade overflow especifica quando o conteúdo de um elemento de nível de bloco deve ser cortado, exibido com barras de rolagem ou se transborda do elemento.

O uso da propriedade overflow com valor diferente de visible (seu valor padrão), criará um novo contexto de formatação de bloco. Isto é tecnicamente necessário para evitar que um conteúdo flutuante que entre em contato com o objeto dentro da área de rolamento e quebre as linhas do conteúdo para ajustar a disposição do texto. A quebra das linhas ocorre sempre que a barra de rolagem é utilizada, tornando a experiência de rolagem lenta.

Nota: Ao definir a propredade scrollTop para o elemento HTML relevante, mesmo que o valor de overflow seja hidden, o conteúdo ainda pode precisar rolar.

Initial valuevisible
Aplica-se aBlock-containers, flex containers, and grid containers
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Sintaxe

overflow:  visible | hidden | scroll | auto | inherit

Valores

visible
Valor padrão. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.
hidden
O conteúdo é cortado e nenhuma barra de rolagem é exibida.
scroll
O conteúdo é acessível através de barras de rolagem que são exibidas mesmo que o conteúdo não precise. Isso evita o problema de barras de rolagem aparecendo e desaparecendo quando o conteúdo é dinâmico. Impressoras podem imprimir o conteúdo vazado.
auto
Depende do navegador utilizado. Navegadores desktop como o Firefox geralmente exibem barras de rolagem apenas quando necessário.

Extensões da Mozilla

-moz-scrollbars-none
Use overflow:hidden no lugar.
-moz-scrollbars-horizontal
O uso de overflow-x e overflow-y é preferido.
-moz-scrollbars-vertical
O uso de overflow-x e overflow-y é preferido.
-moz-hidden-unscrollable
É mantido principalmente para uso interno e por temas. Desabilita o rolamento de elementos raiz de XML e <html>, <body> mediante o uso das setas do teclado ou scroll do mouse.

Exemplos

p {  
     width: 12em;
     border: dotted;
     overflow: visible;   /* Exibe o conteúdo de forma vazada, fora da caixa de conteúdo */ 
}

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* Esconde o conteúdo excedente */ }

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* Sempre exibe barras de rolagem */ }

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* Exibe barras de rolagem apenas se necessário */ }

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Especificações

Especificação Status Comment
CSS Basic Box Model
The definition of 'overflow' in that specification.
Rascunho atual Sem alteração.
CSS Level 2 (Revision 1)
The definition of 'overflow' in that specification.
Recomendação  

Compatibilidade entre navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0 (85)
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico ? 1.0 (1) ? ? ?

Notas sobre o Firefox (Gecko)

Até o Firefox 3.6 (Gecko 1.9.2), a propriedade overflow é incorretamente aplicada para elementos de grupo de tabela (<thead> , <tbody> , <tfoot>). Este comportamento foi corrigido em versões posteriores.

Notas sobre o Internet Explorer

Internet Explorer 4 até 6 torna mais largos elementos com overflow:visible (valor padrão) para acomodar todo o conteúdo. height/width comportam-se como min-height/min-width.

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: haskellcamargo, teoli, KikenCris, Sheppy, diogotito, Francis
Última atualização por: haskellcamargo,