Em CSS, a propriedade overflow é usada para controlar o comportamento do conteúdo que ultrapassa as dimensões do contêiner pai. Ela pode ser útil quando você tem um contêiner com uma altura ou largura fixa e o conteúdo interno é maior do que o contêiner pode exibir. Aqui estão alguns exemplos:

1. Overflow em altura:

css
.container {
  height: 100px; /* Altura fixa do contêiner */
  overflow-y: scroll; /* Adiciona uma barra de rolagem vertical se o conteúdo ultrapassar a altura do contêiner */
}

Neste exemplo, se o conteúdo dentro do contêiner exceder os 100 pixels de altura, uma barra de rolagem vertical será adicionada para permitir que o usuário role e veja o conteúdo além da altura do contêiner.

2. Overflow em largura:

css
.container {
  width: 200px; /* Largura fixa do contêiner */
  overflow-x: hidden; /* Oculta o conteúdo que ultrapassa a largura do contêiner */
}

Aqui, se o conteúdo dentro do contêiner exceder os 200 pixels de largura, o conteúdo será oculto.

3. Overflow em ambas as direções:

css
.container {
  width: 200px; /* Largura fixa do contêiner */
  height: 100px; /* Altura fixa do contêiner */
  overflow: auto; /* Adiciona barras de rolagem em ambas as direções se o conteúdo exceder as dimensões do contêiner */
}

Este exemplo adiciona barras de rolagem tanto na horizontal quanto na vertical, se o conteúdo ultrapassar as dimensões do contêiner.

4. Overflow visível:

css
.container {
  overflow: visible; /* O conteúdo que ultrapassa as dimensões do contêiner será visível fora do contêiner */
}

Neste caso, o conteúdo que ultrapassar as dimensões do contêiner será visível fora do contêiner, sem barras de rolagem.

Esses são exemplos básicos de como a propriedade overflow pode ser usada em CSS para lidar com conteúdo que ultrapassa as dimensões de um contêiner. Escolha o valor apropriado (visible, hidden, scroll ou auto) com base nas suas necessidades de design e usabilidade.