Comment fonctionnent la propriété overflow et les conteneurs de défilement ?

Question

Accepted Answer

`overflow` contrôle ce qui se passe quand le contenu est **trop grand** pour sa boîte — qu'il soit découpé, qu'il défile, ou qu'il déborde.

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

## Axes séparés

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

Un motif courant : empêcher le débordement horizontal tout en autorisant le défilement vertical.

## Créer un conteneur de défilement

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

La clé : un conteneur de défilement a besoin d'une **taille contrainte** (`height`/`max-height`) *plus* `overflow: auto`. Sans limite de taille, la boîte s'agrandit simplement et ne défile jamais.

## Un effet secondaire subtil mais important : overflow crée un contexte de formatage de bloc

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

Définir `overflow` à autre chose que `visible` établit un nouveau **contexte de formatage de bloc**, qui contient les enfants flottants et empêche l'effondrement des marges — historiquement utilisé comme un « clearfix ».

## Fonctionnalités modernes de défilement

```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` construit des carrousels sans JS ; `overscroll-behavior` empêche un panneau défiler de faire aussi défiler la page derrière lui (excellent pour les modales/fenêtres de chat).

## Pourquoi c'est important

`overflow` régit les zones de défilement, l'écrêtage de texte (avec `text-overflow: ellipsis`), et le comportement de défilement des modales/panneaux.

Savoir que les conteneurs de défilement ont besoin d'une contrainte de taille, que `overflow` crée un contexte de formatage, et que les aides modernes (`scroll-snap`, `overscroll-behavior`) couvrent les besoins de disposition et d'UX pratiques autour de overflow.