# Débordement

> Comportement adopté par un élément lorsque son contenu dépasse les dimensions de sa boîte, entre affichage libre, découpe nette ou apparition de barres de défilement.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/debordement/

Un texte trop long dans un encart de largeur fixe, une image plus grande que son conteneur, un tableau de données plus large que l'écran d'un téléphone : dans chacun de ces cas, le navigateur doit trancher, et c'est la propriété `overflow` qui fixe la règle.

## Quatre comportements possibles

La valeur `visible`, par défaut, laisse le contenu dépasser librement, quitte à chevaucher d'autres éléments. La valeur `hidden` coupe net tout ce qui dépasse, sans moyen d'accès pour l'utilisateur. La valeur `scroll` ajoute toujours des barres de défilement, même quand elles ne sont pas nécessaires, tandis que `auto` ne les affiche qu'en cas de besoin réel, ce qui en fait généralement le choix le plus pertinent pour un encart de contenu.

## Exemple

```
.tableau-donnees {
  overflow-x: auto;
  max-width: 100%;
}
```

## Pièges fréquents

- Appliquer `overflow: hidden` sur un parent est une technique courante pour contenir des éléments flottants, mais elle coupe aussi silencieusement toute ombre portée ou info-bulle positionnée en dehors des limites de la boîte.
- Un tableau HTML inséré dans un article WordPress via l'éditeur de blocs peut déborder sur mobile si le thème ne l'enveloppe pas dans un conteneur avec `overflow-x: auto`, provoquant un défilement horizontal de la page entière.
- Les valeurs `overflow-x` et `overflow-y` permettent de contrôler chaque axe indépendamment, plutôt que la propriété raccourcie `overflow` qui applique la même règle aux deux.
- La valeur plus récente `clip` ressemble à `hidden` mais interdit tout défilement programmatique, même via JavaScript, un détail utile pour un élément décoratif qui ne doit jamais devenir scrollable par accident.