Débordement

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.