overflow : hidden, scroll, auto, clip

overflow contrôle ce qui se produit lorsque le contenu d’un élément dépasse ses dimensions définies. La propriété s’applique simultanément aux deux axes (ou utilisez overflow-x/overflow-y pour contrôler chaque axe séparément).

visible (valeur par défaut) — le contenu est affiché en dehors de la boîte. Cela ne crée pas de contexte de formatage de bloc (BFC). D’autres éléments peuvent recouvrir le contenu qui déborde.

hidden tronque le contenu à la limite de la boîte. Cette valeur crée un BFC, qui contient les flottants et empêche la fusion des marges. C’est la valeur la plus courante pour les conteneurs d’images aux coins arrondis.

scroll affiche toujours les barres de défilement (sur les axes qui les prennent en charge), que le contenu déborde ou non. Cette valeur est utile pour obtenir une interface cohérente dans laquelle l’espace réservé aux barres de défilement est toujours présent afin d’éviter les décalages de mise en page.

auto affiche les barres de défilement uniquement lorsque le contenu déborde effectivement. Cette valeur est préférable à scroll pour la plupart des conteneurs défilables, car elle évite l’affichage inutile des barres de défilement.

clip tronque le contenu comme hidden, mais ne crée PAS de BFC. Cela signifie que cette valeur n’influence ni le confinement des flottants ni la fusion des marges. Utilisez-la lorsque vous souhaitez tronquer le contenu sans les effets secondaires du BFC.

Contrôlez chaque axe indépendamment. Un cas très courant consiste à autoriser le défilement horizontal pour les contenus larges (tableaux, code), tout en laissant le débordement vertical visible :

Définir overflow sur une valeur autre que visible et clip crée un contexte de formatage de bloc. Celui-ci contient les flottants internes, empêche la fusion des marges de se propager et établit un nouveau contexte de défilement.

overflow: overlay affiche la barre de défilement par-dessus le contenu au lieu de lui réserver de l’espace dans la mise en page. Cette valeur n’était pas standard dans certains navigateurs et est progressivement abandonnée au profit des méthodes modernes de personnalisation des barres de défilement.

La nouvelle propriété scrollbar-gutter: stable réserve de l’espace pour la barre de défilement même lorsqu’elle n’est pas nécessaire, ce qui évite un décalage de mise en page lorsque le contenu devient défilable.

Un bogue courant : un élément enfant avec position: fixed à l’intérieur d’un élément avec overflow: hidden se comporte comme s’il avait position: absolute — la position fixe est relative au bloc englobant, et le débordement crée un nouveau contexte d’empilement.

Quelle valeur de overflow tronque le contenu sans créer de contexte de formatage de bloc ?

visible (valeur par défaut) autorise le débordement. hidden tronque le contenu et crée un BFC. scroll affiche toujours les barres de défilement. auto les affiche uniquement lorsque cela est nécessaire (valeur recommandée). clip tronque le contenu sans créer de BFC. Utilisez overflow-x/y pour contrôler chaque axe séparément. Utilisez scrollbar-gutter: stable pour éviter les décalages de mise en page.