w3docs logo

Propriété CSS overflow

La propriété overflow définit le comportement du contenu qui dépasse la boîte de l'élément.

Elle spécifie si le contenu doit être rogné pour que le contenu s'inscrive dans la boîte ou si on doit ajouter des barres de défilement à l'élément.

Cette propriété est une raccourcie pour:

Le contenu dépasse lorsque le conteneur a sa hauteur et largeur définie.

La propriété overflow a les valeurs suivantes:

  • visible
  • hidden
  • scroll
  • auto
  • overlay
La valeur "overlay" est obsolète.
Valeur initiale visible
Appliquée à Conteneurs bloc, flex et ceux de la grille.
Héritée Non.
Animable Non.
Version CSS2
Syntaxe DOM Object.style.overflow = "auto";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow</h2>
    <h3>overflow: visible</h3>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
  </body>
</html>

Un autre exemple avec la valeur "scroll" appliquée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow</h2>
    <h3>overflow: scroll</h3>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
  </body>
</html>

Exemple avec la valeur "hidden" qui rogne le contenu pour qu'il s'inscrive dans la boîte:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow</h2>
    <h3>overflow: hidden</h3>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
  </body>
</html>

Un exemple qui contient tous les valeurs de cette propriété:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété overflow </h2>
    <h3>overflow: scroll</h3>
    <div class="scroll">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</div>
    <h3>overflow: hidden</h3>
    <div class="hidden">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</div>
    <h3>overflow: auto</h3>
    <div class="auto">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</div>
    <h3>overflow: visible</h3>
    <div class="visible">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</div>
    <br/>
    <br/>
    <h3>overflow: overlay</h3>
    <div class="overlay">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</div>
  </body>
</html>

Valeurs

Valeur Description
visible Le contenu n'est pas rogné. Le contenu peut être affiché en dehors de la boîte de remplissage. C'est la valeur initiale de cette propriété.
hidden Le contenu est rogné pour qu'il s'inscrive dans la boîte de remplissage.
scroll La barre de défilement est ajoutée pour voir le reste du contenu.
auto Dépend du navigateur. Si le contenu dépasse, une barre de défilement est ajoutée.
overlay La même que auto, mais les barres de défilement sont au-dessus du contenu plutôt que de prendre de la place.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Pratiquez vos connaissances

Quel est l'effet de l'utilisation de la propriété 'overflow' en CSS?
Trouvez-vous cela utile?