¿Cómo funcionan la propiedad overflow y los contenedores de desplazamiento?

Question

Accepted Answer

`overflow` controla qué sucede cuando el contenido es **demasiado grande** para su caja — si se recorta, se desplaza o se desborda.

```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) */
```

## Ejes separados

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

Un patrón común: prevenir overflow horizontal mientras se permite desplazamiento vertical.

## Crear un contenedor de desplazamiento

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

La clave: un contenedor de desplazamiento necesita un **tamaño restringido** (`height`/`max-height`) *más* `overflow: auto`. Sin un límite de tamaño, la caja simplemente crece y nunca se desplaza.

## Un efecto secundario sutil pero importante: overflow crea un contexto de formato de bloque

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

Establecer `overflow` en cualquier cosa que no sea `visible` crea un nuevo **contexto de formato de bloque**, que contiene hijos flotantes y previene el colapso de márgenes — históricamente usado como un "clearfix".

## Características modernas de desplazamiento

```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` construye carruseles sin JS; `overscroll-behavior` evita que un panel desplazado también desplace la página detrás de él (excelente para modales/ventanas de chat).

## Por qué es importante

`overflow` gobierna áreas de desplazamiento, recorte de texto (con `text-overflow: ellipsis`) y comportamiento de desplazamiento de modal/panel.

Saber que los contenedores de desplazamiento necesitan una restricción de tamaño, que `overflow` crea un contexto de formato, y que los ayudantes modernos (`scroll-snap`, `overscroll-behavior`) cubren las necesidades prácticas de diseño y UX en torno al overflow.