overflow

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 (en-US). 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
Computed valueas each of the properties of the shorthand:
Animation typediscrete

Sintaxe

overflow:  visible | hidden | scroll | auto (en-US) | inherit (en-US)

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 (en-US) e overflow-y (en-US) é preferido.

-moz-scrollbars-vertical

O uso de overflow-x (en-US) e overflow-y (en-US) é 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 Box Model
The definition of 'overflow' in that specification.		 Candidata a Recomendação Sem alteração.
CSS Level 2 (Revision 1)
The definition of 'overflow' in that specification.		 Recomendação

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também