overflow-y

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété CSS overflow-y définit ce qui s'affiche lorsque le contenu dépasse les bords supérieur et inférieur d'un élément de niveau bloc. Cela peut être rien, une barre de défilement ou le contenu débordant. Cette propriété peut également être définie en utilisant la propriété raccourcie overflow.

Exemple interactif

overflow-y: visible;

overflow-y: hidden;

overflow-y: clip;

overflow-y: scroll;

overflow-y: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Le trimestre de la Saint-Michel vient de s'achever, et le Lord Chancelier
    siège à Lincoln's Inn Hall. Le temps de novembre est implacable. Il y a
    autant de boue dans les rues que si les eaux venaient à peine de se retirer
    de la surface de la terre.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Syntaxe

css

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

/* Valeurs globales */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;

La propriété overflow-y est définie avec une seule valeur de mot-clé <overflow>.

Si overflow-x est hidden, scroll ou auto, et que la propriété overflow-y est visible (par défaut), la valeur sera calculée implicitement comme auto.

Valeurs

visible: Le contenu débordant n'est pas rogné et peut être visible en dehors du remplissage de la boîte de l'élément sur les bords supérieur et inférieur. La boîte de l'élément n'est pas un conteneur de défilement.
hidden: Le contenu débordant est rogné si nécessaire pour tenir verticalement dans le remplissage de la boîte de l'élément. Aucune barre de défilement n'est fournie.
clip: Le contenu débordant est rogné au niveau du bord de rognage du dépassement qui est défini à l'aide de la propriété overflow-clip-margin. En conséquence, le contenu déborde du remplissage de la boîte de l'élément de la valeur <length> de overflow-clip-margin ou de 0px si elle n'est pas définie. La différence entre clip et hidden est que le mot-clé clip interdit également tout défilement, y compris le défilement programmatique. Aucun nouveau contexte de formatage n'est créé. Pour établir un contexte de formatage, utilisez overflow: clip avec display: flow-root. La boîte de l'élément n'est pas un contenant de défilement.
scroll: Le contenu débordant est rogné si nécessaire pour tenir verticalement dans le remplissage de la boîte de l'élément. Les navigateurs affichent des barres de défilement dans la direction verticale, que du contenu soit effectivement rogné ou non. (Cela empêche les barres de défilement d'apparaître ou de disparaître lorsque le contenu change.) Les imprimantes peuvent tout de même imprimer le contenu débordant.
auto: Le contenu débordant est rogné au niveau du remplissage de la boîte de l'élément, et le contenu débordant peut être défilé pour être affiché. Contrairement à scroll, les agents utilisateurs affichent des barres de défilement uniquement si le contenu déborde et masquent les barres de défilement par défaut. Si le contenu tient dans le remplissage de la boîte de l'élément, cela ressemble à visible, mais crée tout de même un nouveau contexte de formatage de bloc.

Note : La valeur de mot-clé overlay est une valeur d'alias héritée pour auto. Avec overlay, les barres de défilement sont dessinées au-dessus du contenu au lieu de prendre de la place.

Définition formelle

Valeur initiale	`visible`
Applicabilité	Conteneurs de type bloc, conteneurs flexibles et conteneurs de grille
Héritée	non
Valeur calculée	comme défini, sauf avec `visible`/`clip` qui sont calculés en `auto`/`hidden` respectivement si l'une des valeurs de `overflow-x` ou `overflow-y` n'est ni `visible` ni `clip`
Type d'animation	discrète

Syntaxe formelle

overflow-y = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

Exemples

Définir le comportement de `overflow-y`

HTML

html

<ul>
  <li>
    <code>overflow-y: hidden</code> — cache le texte en dehors de la boîte
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y: scroll</code> — ajoute toujours un ascenseur
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y: visible</code> — affiche le texte en dehors de la boîte si
    besoin
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y: auto</code> — sur la plupart des navigateurs, cela sera
    équivalent à <code>scroll</code>
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

css

div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 120px;
}

Résultat

Spécifications

Spécification
CSS Overflow Module Level 3 # overflow-properties

Compatibilité des navigateurs

Voir aussi

Les propriétés clip, display, text-overflow, white-space
Le module de débordement CSS
Apprendre : Contenu débordant

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 21 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu