Examinons comment contrôler le dépassement du contenu à l'aide d'une seule propriété. Il arrive parfois que l'on définisse une width et une height fixes pour un élément. Cependant, le contenu interne peut être bien plus volumineux que l'espace disponible. La propriété overflow contrôle le comportement du contenu d'un élément lorsqu'il dépasse les valeurs de height ou de width explicitement définies pour cet élément.

overflow: visible | scroll | hidden | auto

• visible — valeur par défaut. Le contenu déborde des bordures de l'élément et reste visible ;
• scroll — le contenu déborde des bordures de l'élément, et une barre de défilement apparaît, permettant à l'utilisateur de faire défiler verticalement et horizontalement ;
• hidden — le contenu qui dépasse la taille des bordures de l'élément est coupé et n'est pas visible ;
• auto — fonctionne comme scroll, mais les barres de défilement n'apparaissent que lorsque le contenu déborde des bordures de l'élément.

Remarque

Le contenu débordant n'affecte pas la géométrie des autres éléments.

visible

Si la propriété overflow n'est pas définie, sa valeur par défaut est visible. Cela signifie que le contenu sera affiché en dehors des bordures de l'élément. Dans l'exemple, les bordures de la boîte sont mises en évidence en darkblue, et la boîte possède des propriétés width et height fixes.

scroll

L'intégralité du contenu de l'élément peut être visualisée à l'aide d'une barre de défilement. Exemple :

hidden

Tout contenu débordant sera masqué et l’utilisateur ne pourra jamais le voir. En général, cette option est utile uniquement lorsque des effets décoratifs sont nécessaires.