La propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Elle 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é 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.

Syntaxe

/* Valeurs avec un mot-clé */
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

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

La propriété overflow peut être définie grâce à un ou deux des mots-clés suivants. Si deux mots-clés sont utilisé, le premier sera appliqué à overflow-x et le second à overflow-y. Si une seule valeur est utilisée, elle sera appliquée à overflow-x et à overflow-y.

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 remplissage (padding).
hidden
Le contenu est rogné si besoin pour s'inscrire dans la boîte de remplissage (padding) et aucune barre de défilement n'est affichée.
scroll
Le contenu est rogné pour s'inscrire dans la boîte de remplissage (padding) 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 affichent des ascenseurs si le contenu dépasse dans la boîte de remplissage (padding)
overlay
Cette valeur se comporte comme auto sauf que les barres de défilement sont au-dessus du contenu plutôt que de prendre de la place. Cette valeur est uniquement prise en charge par les navigateurs basés sur WebKit (Safari) ou Blink (Chrome, Opera).

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 | clip | scroll | auto ]{1,2}

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 État Commentaires
CSS Overflow Module Level 3
La définition de 'overflow' dans cette spécification.
Version de travail La syntaxe permet désormais d'utiliser une ou deux valeurs.
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.

Valeur initialevisible
ApplicabilitéBlock-containers, flex containers, and grid containers
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes After Firefox 3.6, the overflow property is correctly applied to table group elements (<thead>, <tbody>, <tfoot>).
IE Support complet 4
Notes
Support complet 4
Notes
Notes From version 4 to 6, Internet Explorer enlarges an element with overflow: visible (default value) to fit the content inside it. height and width behave like min-height and min-width, respectively.
Opera Support complet 7Safari Support complet 1WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
Multiple keyword syntax for overflow-x and overflow-y
Expérimentale
Chrome Support complet 68Edge Aucun support NonFirefox Support complet 61IE Aucun support NonOpera Support complet 55Safari Aucun support NonWebView Android Support complet 68Chrome Android Support complet 68Edge Mobile Aucun support NonFirefox Android Support complet 61Opera Android Support complet 55Safari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

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