overflow

La propriété overflow définit comment rogner le contenu, comment afficher les barres de défilement ou encore comment afficher le contenu sortant du cadre dans un élément de type bloc.

Lorsqu'on utilise la propriété overflow avec une autre valeur que visible (la valeur par défaut), cela entraîne la création d'un nouveau contexte de formatage de bloc. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée

Afin que la propriétée overflow puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à height ou max-height) ou avoir white-space avec la valeur nowrap.

Note : Lorsqu'on définit, via un script, la propriété scrollTop sur les éléments HTML pertinents, même lorsque overflow vaut hidden, il faut parfois faire défiler l'élément.

Valeur initiale	`visible`
Applicabilité	les éléments de bloc non remplacés et les éléments en bloc en ligne et en bloc (inline-block)
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Animable	non
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntax

/* Le contenu n'est pas rogné */
overflow: visible;

/* Le contenu est rogné */
overflow: hidden;

/* Le contenu est rogné et affiche des ascenseurs */
overflow: scroll;

/* On laisse l'agent utilisateur décider */
overflow: auto;

/* Valeurs globales */
overflow: inherit;
overflow: initial;
overflow: unset;

Valeurs

visible: La valeur par défaut. Le contenu n'est pas rogné. Le contenu peut éventuellement être affiché en dehors de la boîte de contenu.
hidden: Le contenu est rogné et aucune barre de défilement n'est affichée.
scroll: Le contenu est rogné et les navigateurs de bureau affichent des barres de défilement dans tous les cas. Cela évite d'avoir des barres qui apparaissent et disparaissent sans cesse avec du contenu dynamique. Les imprimantes peuvent éventuellement imprimer le contenu qui dépasse.
auto: Le comportement est laissé à la discrétion de l'agent utilisateur. Les navigateurs comme Firefox affiche des ascenseurs si le contenu dépasse.

Extensions propres au moteur Mozilla

-moz-scrollbars-none: overflow:hidden doit être utilisé à la place.
-moz-scrollbars-horizontal: Utilisez overflow-x et overflow-y à la place.
-moz-scrollbars-vertical: Utilisez overflow-x et overflow-y à la place.
-moz-hidden-unscrollable: Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <html>, <body> (avec les flèches du clavier et la roue de la souris).

Syntaxe formelle

visible | hidden | scroll | auto

Exemples

p {  
  width: 12em;
  height: 6em;
  border: dotted;
   
  /* le contenu n'est pas rogné */
  overflow: visible;  
}

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p {
  /* pas d'ascenseur fourni */
  overflow: hidden;
}

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p {
  /* les ascenseurs sont toujours affichés */
  overflow: scroll;
}

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p {
  /* les ascenseurs sont affichés si nécessaires */
  overflow: auto;
}

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Spécifications

Spécification	Statut	Commentaires
CSS Overflow Module Level 3 La définition de 'overflow' dans cette spécification.	Version de travail
CSS Basic Box Model La définition de 'overflow' dans cette spécification.	Version de travail	Aucun changement.
CSS Level 2 (Revision 1) La définition de 'overflow' dans cette spécification.	Recommendation	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple	1.0	1.0 (1.7 ou moins)^[1]	4.0^[2]	7.0	1.0 (85)

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Support simple	?	1.0 (1)^[1]	?	?	?

[1] Jusqu'à Firefox 3.6 (Gecko 1.9.2), la propriété overflow est appliquée de façon incorrecte sur les éléments liés aux tableaux (<thead> , <tbody> , <tfoot>). Ce comportement erroné est corrigé avec les versions ultérieures.

[2] Les version d'Internet Explorer de 4 à 6 agrandissent un élément avec overflow:visible (la valeur par défaut) pour que le contenu tienne dedans. height/width se comporte comme min-height/min-width.