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.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
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.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.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.
.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.
.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 ».
.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).
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.