Overflow
O overflow é uma propriedade do CSS utilizada para tratar conteúdos que ultrapassam os limites de um elemento.
O objetivo do overflow é fazer com que conteúdos muito grandes possam caber dentro de uma página através do uso de barras de rolagem.
Veremos mais a frente um exemplo prático de overflow.
Overflow: na prática
A seguir temos um exemplo de uso da propriedade overflow:
Overflow: valores
A propriedade overflow possui quatro valores possíveis que veremos a seguir.
visible
Esse é o valor padrão da propriedade overflow, e mostra todo conteúdo que for colocado dentro do elemento, ainda que ultrapasse o tamanho definido.
hidden
O valor hidden é utilizado quando queremos esconder a parte de um elemento para que ele não passe do tamanho determinado. Geralmente é utilizado junto das propriedades width e height.
scroll
O valor scroll tem o mesmo comportamento do hidden, ocultando o conteúdo no limite do tamanho definido, porém, ele adiciona também uma barra de rolagem, permitindo acesso ao restante do conteúdo.
É importante saber que o valor scroll adicionará barras de rolagem ainda que elas não sejam necessárias. Esse comportamento pode ser visto no exemplo abaixo, que mostra uma barra vertical necessária e uma horizontal desnecessária.
auto
O valor auto, por sua vez, tem o mesmo comportamento do scroll: a única mudança é que o scroll só será adicionado caso seja necessário.
Veja que agora apenas a barra vertical é exibida:
Overflow: formas de uso
A propriedade overflow pode ser utilizada de três formas diferentes que veremos a seguir.
overflow
Essa é a forma padrão, utilizada para aplicar o efeito tanto na horizontal, quanto na vertical:
overflow: auto;
overflow-x
Essa forma é utilizada para aplicar o overflow apenas na horizontal. Ao fazer isso, a parte vertical assumirá por padrão o valor auto.
overflow-y
Essa forma é utilizada para aplicar o overflow apenas na vertical. Ao fazer isso, a parte horizontal assumirá por padrão o valor auto.
Overflow-x e Overflow-y simplificados
Também é possível replicar o comportamento de overflow-x e overflow-y de forma simplificada utilizando o overflow. Para isso, basta informar 2 valores, o primeiro valor equivale ao overflow-x, já o segundo, equivale ao overflow-y. Veja o exemplo:
Exemplo prático de uso do overflow
Veja a seguir um exemplo prático de uso de overflow em uma página:
