O que faz a propriedade overflow em CSS e em que casos deve ser usada?

A propriedade overflow em CSS determina como lidar com o conteúdo que ultrapassa os limites de um elemento.

• visible: O conteúdo é exibido completamente, mesmo que ultrapasse o limite do contêiner.
• hidden: O conteúdo que ultrapassa o limite do contêiner é cortado e não visível.
• scroll: As barras de rolagem (horizontal e vertical) são sempre exibidas, mesmo que o conteúdo não ultrapasse.
• auto: As barras de rolagem aparecem apenas quando necessário (quando o conteúdo ultrapassa).

Deve ser usado:

• Quando o conteúdo do elemento (por exemplo, texto ou imagem) pode ser maior do que as dimensões definidas, e é necessário gerenciar sua exibição.
• Para criar áreas roláveis dentro da página, por exemplo, para listas, blocos de código ou tabelas.
• Para recortar conteúdo indesejado que ultrapassa o elemento, para manter o layout original.

Exemplo de uso de overflow: auto; para um bloco com altura limitada:

.scrollable-block {
  height: 200px; /* Limitamos a altura do bloco */
  overflow: auto; /* Adicionamos barras de rolagem se o conteúdo for maior */
  border: 1px solid #ccc; /* Adicionamos uma borda para visualização */
  padding: 10px; /* Espaçamento interno */
}