Propriété CSS overflow

La propriété CSS overflow contrôle ce qui se passe lorsque le contenu d'un élément est trop grand pour tenir dans sa boîte. Vous décidez si le contenu supplémentaire est simplement rogné, affiché quand même, ou rendu défilable.

Le débordement n'est visible que lorsque la boîte a une taille contrainte. La façon la plus courante de la contraindre est de définir une hauteur fixe (et éventuellement une largeur), mais une boîte peut aussi être contrainte par une disposition flex ou grid. Si la boîte peut croître librement pour s'adapter à son contenu, il n'y a rien à déborder et la propriété n'a aucun effet visible.

overflow est une propriété raccourcie qui définit deux propriétés longues en même temps :

overflow-x — contrôle le rognage sur l'axe gauche/droite (horizontal).
overflow-y — contrôle le rognage sur l'axe haut/bas (vertical).

Lorsque vous donnez à overflow une seule valeur, les deux axes la reçoivent. Avec deux valeurs, la première s'applique à overflow-x et la seconde à overflow-y (par exemple overflow: hidden scroll;).

Aperçu des valeurs

La propriété overflow accepte ces mots-clés :

visible — valeur par défaut. Le contenu n'est pas rogné ; il déborde de la boîte et chevauche ce qui est à côté.
hidden — le contenu qui ne tient pas est rogné et devient invisible. Aucune barre de défilement n'est proposée, donc la partie cachée est inaccessible à l'utilisateur.
scroll — le contenu est rogné, et les barres de défilement sont toujours affichées (même quand tout tient), ce qui évite les décalages de mise en page.
auto — le contenu est rogné et les barres de défilement apparaissent uniquement si nécessaire. C'est le choix habituel pour les panneaux défilables.
overlay — comme auto, mais les barres de défilement sont dessinées par-dessus le contenu au lieu d'occuper de l'espace.

Danger

La valeur overlay est obsolète et ne doit pas être utilisée. Utilisez auto à la place — les navigateurs modernes peuvent afficher des barres de défilement en superposition selon les paramètres du système d'exploitation de l'utilisateur.

Choisir une valeur

Utilisez auto pour une région défilable (panneaux de discussion, blocs de code, modales) — les barres de défilement n'apparaissent que si le contenu déborde réellement.
Utilisez hidden pour rogner délibérément du contenu, pour découper une image aux coins arrondis, ou pour contenir des flottants (voir ci-dessous). Gardez à l'esprit que le contenu rogné est inaccessible à l'utilisateur, ne cachez donc rien dont il a besoin.
Utilisez scroll quand vous souhaitez un espace réservé pour la barre de défilement afin que la mise en page ne saute pas lors des changements de contenu.
Laissez visible quand le débordement est acceptable, comme une infobulle ou un menu déroulant qui dépasse intentionnellement de son parent.

Deux effets secondaires utiles

Contenir des flottants. Définir overflow sur autre chose que visible fait croître l'élément suffisamment pour englober ses enfants flottants. Ainsi, un parent avec overflow: hidden (ou auto) et aucune hauteur déclarée s'étendra pour inclure le contenu flottant à l'intérieur. Notez que cela ne libère pas le flottant — il le contient simplement. (L'alternative moderne est display: flow-root, qui fait la même chose sans les effets secondaires de rognage.)

Créer un contexte de formatage de bloc (BFC). Une valeur overflow différente de visible démarre un nouveau contexte de formatage de bloc. C'est pratique quand vous voulez qu'un élément bloc se positionne proprement à côté d'un élément flottant au lieu de passer en dessous.

Valeur initiale	visible
S'applique à	Conteneurs de blocs, conteneurs flex et conteneurs grid.
Hérité	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	Object.style.overflow = "auto";

Syntaxe

Syntaxe CSS overflow

overflow: visible | hidden | scroll | auto | overlay | initial | inherit;

Exemple de la propriété overflow avec la valeur "visible"

Avec visible, le texte du paragraphe dépasse le bas de sa boîte de 200px au lieu d'être coupé — comportement par défaut.

Exemple de code CSS overflow

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: #ccc;
        width: 300px;
        height: 200px;
        overflow: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow property example</h2>
    <h3>overflow: visible</h3>
    <p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété overflow avec la valeur "scroll"

Avec scroll, les deux barres de défilement apparaissent qu'elles soient nécessaires ou non, et le texte débordant devient accessible par défilement.

Exemple CSS overflow scroll

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: #ccc;
        width: 300px;
        height: 200px;
        overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow property example</h2>
    <h3>overflow: scroll</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété overflow avec la valeur "hidden"

Avec hidden, le texte qui ne tient pas est rogné et il n'y a pas de barre de défilement, donc la partie coupée est inaccessible.

Exemple CSS overflow hidden

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: #ccc;
        width: 300px;
        height: 200px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow property example</h2>
    <h3>overflow: hidden</h3>
    <p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété overflow avec la valeur "auto"

auto est la valeur la plus pratique : une barre de défilement apparaît uniquement sur l'axe qui déborde réellement. Cet exemple montre aussi comment overflow-x et overflow-y peuvent être définis indépendamment.

CSS overflow auto

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .scroll {
        width: 200px;
        height: 300px;
        border: 1px solid;
        overflow: auto;
        margin-bottom: 10px;
      }
      .scroll-x {
        width: 200px;
        height: 300px;
        border: 1px solid;
        overflow-x: auto;
        overflow-y: hidden;
        margin-bottom: 10px;
      }
      .scroll-y {
        width: 200px;
        height: 300px;
        border: 1px solid;
        overflow-y: auto;
        margin-bottom: 10px;
      }
      .scroll>div {
        width: 400px;
        height: 50px;
        background: #ccc;
      }
      .scroll-y>div {
        width: 200px;
        height: 50px;
        background: #ccc;
      }
      .scroll-x>div {
        width: 400px;
        height: 50px;
        background: #ccc;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h1>Example with Overflow Property</h1>
    <h2>overflow overflow scroll auto</h2>
    <div class="scroll">
      <h2>Overflow Property </h2>
      <div>
        <h2>overflow scroll property</h2>
      </div>
      <p>
        Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
    <h2>overflow overflow-x auto</h2>
    <div class="scroll-x">
      <h2>Overflow Property </h2>
      <div>
        <h2>overflow scroll-x property</h2>
      </div>
      <p>
        Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer.
      </p>
    </div>
    <h2>overflow overflow-y auto</h2>
    <div class="scroll-y">
      <h2>Overflow Property </h2>
      <div>
        <h2>overflow scroll-y property</h2>
      </div>
      <p>
        Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. software like Aldus PageMaker including versions of Lorem Ipsum.but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété overflow avec toutes les valeurs

Cet exemple place le même texte dans cinq boîtes pour vous permettre de comparer chaque valeur côte à côte.

Exemple CSS overflow avec toutes les valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: scroll;
      }
      div.hidden {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: hidden;
      }
      div.auto {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: auto;
      }
      div.visible {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: visible;
      }
      div.overlay {
        background-color: #eee;
        width: 300px;
        height: 200px;
        overflow: overlay;
      }
    </style>
  </head>
  <body>
    <h2>Overflow property example</h2>
    <h3>overflow: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1 500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <h3>overflow: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <h3>overflow: auto</h3>
    <div class="auto">
      Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <h3>overflow: visible</h3>
    <div class="visible">
      Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <br />
    <br />
    <h3>overflow: overlay</h3>
    <div class="overlay">
      Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
visible	Le contenu n'est pas rogné et s'affiche en dehors de la boîte de remplissage. C'est la valeur par défaut de cette propriété.	Essayer »
hidden	Le contenu est rogné pour tenir dans la boîte de remplissage.	Essayer »
scroll	Une barre de défilement est ajoutée pour voir le reste du contenu.	Essayer »
auto	Dépend du navigateur. Si le contenu déborde, une barre de défilement est ajoutée.	Essayer »
overlay	Fonctionne comme auto, mais avec les barres de défilement dessinées par-dessus le contenu au lieu d'occuper de l'espace. Cette valeur obsolète ne doit plus être utilisée, même si elle peut encore fonctionner.	Essayer »
initial	Applique la valeur par défaut de la propriété.	Essayer »
inherit	Hérite la propriété de son élément parent.

Propriétés associées

overflow-x et overflow-y — définissent le rognage par axe.
white-space — combinez nowrap avec overflow: hidden pour maintenir le texte sur une ligne avant de le rogner.
display — display: flow-root contient les flottants sans les effets secondaires de rognage d'overflow.

Exercice

Pratique

Que fait la propriété CSS overflow ?

Elle spécifie ce qui doit se passer si le contenu déborde de la boîte d'un élément.Elle modifie la taille de la boîte d'un élément.Elle spécifie s'il faut rogner le contenu, afficher des barres de défilement ou simplement afficher le contenu débordant.Elle définit la couleur d'arrière-plan de la boîte d'un élément.Elle supprime tout contenu débordant de la boîte d'un élément.