overflow
========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
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 value | `visible` |
| Aplica-se a | Block-containers, flex containers, and grid containers |
| Inherited | não |
| Computed value | as each of the properties of the shorthand:* `overflow-x` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
* `overflow-y` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
 |
| Animation type | discrete |

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` 
Deprecated

O uso de `overflow-x` (en-US) e `overflow-y` (en-US) é preferido.

`-moz-scrollbars-vertical` 
Deprecated

O uso de `overflow-x` (en-US) e `overflow-y` (en-US) é 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 |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Propriedades CSS relacionadas: `text-overflow`, `white-space`, `overflow-x` (en-US), `overflow-y` (en-US), `clip` (en-US), `display`