Como funcionam a propriedade overflow e os contêineres de scroll?

Question

Accepted Answer

`overflow` controla o que acontece quando o conteúdo é **muito grande** para sua caixa — seja cortado, rolagem ou derrama para fora.

```css
.box { overflow: visible; }  /* default — content spills OUT of the box */
.box { overflow: hidden; }   /* clipped — overflowing content is cut off */
.box { overflow: scroll; }   /* always shows scrollbars (even if not needed) */
.box { overflow: auto; }     /* scrollbars appear ONLY when needed (best) */
```

## Eixos separados

```css
.box {
  overflow-x: hidden;  /* clip horizontal */
  overflow-y: auto;    /* scroll vertical when needed */
}
```

Um padrão comum: evitar overflow horizontal enquanto permite rolagem vertical.

## Criando um contêiner de scroll

```css
.scroll-area {
  max-height: 400px;   /* constrain the height */
  overflow-y: auto;    /* content beyond 400px scrolls */
}
```

A chave: um contêiner de scroll precisa de um **tamanho restringido** (`height`/`max-height`) *além de* `overflow: auto`. Sem um limite de tamanho, a caixa apenas cresce e nunca faz scroll.

## Um efeito colateral sutil mas importante: overflow cria um contexto de formatação de bloco

```css
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
```

Definir `overflow` para qualquer coisa diferente de `visible` estabelece um novo **contexto de formatação de bloco**, que contém filhos flutuantes e evita recolhimento de margem — historicamente usado como um "clearfix".

## Recursos modernos de scroll

```css
.gallery {
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* snap to items while scrolling */
  overscroll-behavior: contain;   /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
```

`scroll-snap` constrói carrosséis sem JS; `overscroll-behavior` impede que um painel rolado também role a página atrás dele (ótimo para modais/janelas de chat).

## Por que isso importa

`overflow` governa áreas de rolagem, corte de texto (com `text-overflow: ellipsis`) e comportamento de rolagem de modal/painel.

Saber que contêineres de scroll precisam de uma restrição de tamanho, que `overflow` cria um contexto de formatação e que os auxiliares modernos (`scroll-snap`, `overscroll-behavior`) cobrem as necessidades práticas de layout e UX em torno de overflow.