Vamos analisar como podemos controlar o transbordamento de conteúdo utilizando uma única propriedade. Às vezes, ocorre de termos a width e height fixas de um elemento. No entanto, o conteúdo interno pode ser muito maior do que o espaço disponível. A propriedade overflow controla o comportamento do conteúdo de um elemento quando ele excede os valores de height ou width definidos explicitamente para o elemento.

overflow: visible | scroll | hidden | auto

• visible - é o valor padrão. O conteúdo ultrapassa as bordas do elemento e permanece visível;
• scroll - O conteúdo ultrapassa as bordas do elemento, e uma barra de rolagem aparece permitindo ao usuário rolar tanto vertical quanto horizontalmente;
• hidden - O conteúdo que ultrapassa o tamanho das bordas do elemento é cortado e não fica visível;
• auto - funciona da mesma forma que scroll. No entanto, as barras de rolagem aparecem apenas quando o conteúdo ultrapassa as bordas do elemento.

Nota

O conteúdo que transborda não afeta a geometria dos outros elementos.

visible

Se a propriedade overflow não for definida, seu valor padrão é visible. Isso significa que o conteúdo será exibido fora das bordas do elemento. No exemplo, as bordas da caixa estão destacadas em darkblue, e a caixa possui propriedades fixas de width e height.

scroll

É possível visualizar todo o conteúdo do elemento utilizando uma barra de rolagem. Veja o exemplo:

hidden

Todo o conteúdo excedente será ocultado, e o usuário nunca o verá. Geralmente, é útil apenas quando precisamos criar alguns efeitos decorativos.