Un texte plus long que prévu, une image plus grande que sa boîte, une liste de commentaires qui s'allonge sans fin : le contenu d'une page ne respecte pas toujours les dimensions qu'on lui a fixées. overflow décide ce qui se passe le jour où ce débordement arrive.
C'est une propriété que l'on croise sur presque tous les composants qui ont une hauteur limitée : une carte, une fenêtre de chat, une fenêtre modale, un menu déroulant trop long pour l'écran.
Définition
overflow gère le débordement d'un contenu par rapport aux dimensions de sa boîte, telles que définies par le Modèle de boîte. Elle prend cinq valeurs principales : visible (le défaut, le contenu déborde librement), hidden (le débordement est coupé), scroll, auto, et la plus récente, clip.
Les cinq valeurs, une par une
| Valeur | Contenu coupé | Barre de défilement |
|---|---|---|
visible | Non | Jamais |
hidden | Oui | Jamais, même via le clavier ou le script |
scroll | Oui | Toujours affichée, même sans besoin |
auto | Oui | Seulement si le contenu déborde réellement |
clip | Oui | Jamais, et le défilement reste impossible même par script |
auto est de loin la valeur la plus utilisée en pratique : elle évite l'inconvénient de scroll, qui affiche une barre même sur un contenu qui tient largement dans sa boîte, tout en gardant le contenu accessible dès qu'il dépasse.
overflow-x et overflow-y : un axe à la fois
La propriété overflow est en réalité un raccourci pour deux propriétés distinctes, overflow-x et overflow-y, qui contrôlent chaque axe indépendamment.
.fil-de-discussion {
overflow-y: auto;
overflow-x: hidden;
max-height: 400px;
}Cette combinaison, très courante sur une fenêtre de chat, autorise le défilement vertical dès que la conversation dépasse 400 pixels de haut, tout en empêchant tout débordement horizontal accidentel, par exemple à cause d'un long mot ou d'une URL sans espace.
L'effet de bord sur position: sticky
Un position: sticky cesse de fonctionner dès qu'un de ses ancêtres, entre lui-même et sa zone de défilement, porte un overflow réglé sur hidden, scroll ou auto. Ce parent devient la nouvelle référence de défilement du navigateur, souvent sans que personne ne l'ait fait exprès, et l'élément sticky se comporte alors comme un simple élément statique.
Un autre usage fréquent : masquer un débordement décoratif
overflow: hidden ne sert pas uniquement à gérer un contenu trop long : c'est aussi le moyen le plus simple d'appliquer un border-radius à une image qui, sans cela, continuerait à afficher ses coins carrés par dessus l'arrondi du conteneur. La même technique coupe proprement un dégradé décoratif ou une ombre qui déborderait autrement d'une carte aux coins arrondis.
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
}Sans cette dernière ligne, l'image placée dans .avatar resterait carrée malgré l'arrondi appliqué au conteneur qui l'entoure, un piège fréquent chez qui découvre le découpage d'image en CSS.
Questions fréquentes
Quelle différence entre overflow: hidden et overflow: clip ?
Les deux coupent visuellement le contenu qui dépasse, mais hidden autorise encore un défilement programmatique, par exemple via JavaScript ou en donnant le focus clavier à un élément interne. clip interdit tout défilement, même de cette façon, ce qui la rend légèrement plus performante mais aussi plus stricte.
Pourquoi mon élément sticky ne se fige plus après un changement anodin ?
La cause la plus fréquente est l'ajout, parfois indirect, d'un overflow différent de visible sur un parent, souvent pour corriger un tout autre problème comme un débordement de box-shadow ou un arrondi de coin. Ce changement, apparemment sans rapport, casse silencieusement l'effet sticky d'un enfant plus bas dans l'arborescence.
Comment masquer la barre de défilement tout en gardant le défilement actif ?
overflow seule ne le permet pas : auto et scroll affichent toujours une barre visible selon le système d'exploitation. Il faut cibler l'apparence de la barre elle-même avec des propriétés spécifiques au navigateur, en gardant à l'esprit qu'une barre totalement invisible peut nuire à l'utilisateur qui ne sait plus qu'il peut faire défiler le contenu.