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 initialevisible
Applicabilitéles éléments de bloc non remplacés et les éléments en bloc en ligne et en bloc (inline-block)
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'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.

Compatibilité des navigateurs

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.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : matsumonkie, SphinxKnight, Sebastianz, scaillerie, teoli, FredB
 Dernière mise à jour par : matsumonkie,