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. 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:
  • overflow-x: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
  • overflow-y: as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
Animation typediscrete

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 Deprecated

O uso de overflow-x e overflow-y é preferido.

-moz-scrollbars-vertical Deprecated

O uso de overflow-x e overflow-y é preferido.

-moz-hidden-unscrollable Non-standard

É 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

css
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

Specification
CSS Overflow Module Level 3
# propdef-overflow
Scalable Vector Graphics (SVG) 2
# OverflowAndClipProperties

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow
auto
clip
hidden
Multiple keyword syntax for overflow-x and overflow-y
scroll
visible

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Veja também