overflow-x
Décide quoi faire du contenu qui dépasse horizontalement. Sa jumelle overflow-y fait la même chose verticalement.
- Valeur initiale
visible- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs de bloc, conteneurs flex et conteneurs grid
- JavaScript
element.style.overflowX = "auto"
Exemple
#.chips {
display: flex;
gap: 8px;
overflow-x: auto;
padding-block-end: 8px;
}
.chips button {
flex: none;
}<style>
.chips button { padding: 6px 14px; border: 1px solid #3f3f46; border-radius: 999px; background: #18181b; color: inherit; font: inherit; }
.chips button:first-child { border-color: #7c3aed; background: #2e1065; }
</style>
<p style="margin: 0 0 8px">Filtrer les cours</p>
<div class="chips">
<button type="button">Tous</button>
<button type="button">HTML</button>
<button type="button">CSS</button>
<button type="button">JavaScript</button>
<button type="button">TypeScript</button>
<button type="button">Python</button>
<button type="button">React</button>
<button type="button">Next.js</button>
<button type="button">NestJS</button>
</div>Sur un écran étroit, les boutons ne passent pas à la ligne, ils défilent horizontalement. flex: none leur interdit de se comprimer, et padding-block-end éloigne la barre de défilement des boutons.
Définition et utilisation
#La propriété overflow-x définit ce qui arrive au contenu qui ne tient pas en largeur dans un élément : il déborde, est découpé, ou devient défilable. Sa jumelle overflow-y fonctionne de la même façon, mais verticalement. Les deux acceptent les mêmes valeurs que le raccourci overflow, qui les définit toutes les deux à la fois.
Des axes séparés sont utiles quand le défilement ne doit fonctionner que dans une direction. Une barre de filtres horizontale sur téléphone, un tableau large ou de longues lignes de code reçoivent overflow-x: auto, tandis qu’un panneau latéral ou une fenêtre de chat qui défile vers le bas reçoit overflow-y: auto.
Les deux axes ne sont cependant pas totalement indépendants, et cette règle surprend presque tout le monde. Si l’un des deux défile ou découpe avec défilement (hidden, scroll, auto), alors visible sur l’autre se transforme en auto, et clip en hidden. Impossible donc de défiler en horizontal tout en laissant quelque chose dépasser en vertical. L’exception est clip, qui n’impose pas cette conversion.
Les valeurs autres que visible et clip créent un conteneur de défilement. C’est pourquoi overflow-x: hidden sur un ancêtre peut casser position: sticky. Si vous voulez seulement découper l’excédent, sans défilement, choisissez clip.
Syntaxe
#overflow-x: visible | hidden | clip | scroll | auto;
overflow-y: visible | hidden | clip | scroll | auto;Valeurs
#- La bande de cartes dépasse du cadre à droite, et le badge au-dessus de la première carte dépasse en haut. C’est la valeur par défaut.
- L’excédent est découpé au bord du cadre, et il n’y a pas de barre de défilement. Remarquez que le badge est lui aussi découpé : l’axe vertical est passé de
visibleàauto. - Une barre de défilement horizontale apparaît seulement quand le contenu ne tient pas. Le choix le plus courant, mais le badge est de nouveau découpé.
- La place pour la barre de défilement est toujours réservée, même quand le contenu tient. Sur les systèmes qui masquent les barres (par exemple macOS), cela ressemble à
auto. - Découpe l’excédent horizontal sans créer de conteneur de défilement. L’axe vertical peut rester
visible, donc le badge dépasse en entier. axe vertical
La même logique à la verticale. La liste a une hauteur fixe, et l’excédent défile vers le bas.
Valeurs en pratique
#visible
.demo { overflow-x: visible; }auto
.demo { overflow-x: auto; }scroll
auto..demo { overflow-x: scroll; }clip
visible, donc le badge dépasse en entier..demo { overflow-x: clip; }overflow-y: auto
.demo { overflow-y: auto; }Plus d’exemples
#pre {
overflow-x: auto;
padding: 12px 16px;
border-radius: 10px;
background: #18181b;
}<pre><code>const message = 'Module Flexbox terminé ! Vous gagnez 150 points d’expérience et un badge pour 7 jours d’apprentissage consécutifs.'</code></pre>Un bloc de code ne retourne pas à la ligne, donc sans overflow-x: auto, une longue ligne étirerait la mise en page de la page. Avec cette déclaration, seul le bloc défile.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Une bande de cartes ou de filtres sur téléphone, c’est
display: flexavecoverflow-x: autosur le parent etflex: nonesur les enfants. - Une barre de défilement horizontale sur toute la page se corrige mieux à la source, en recherchant l’élément trop large. Si vous devez la masquer, utilisez
overflow-x: clipplutôt quehidden, pour ne pas casserposition: sticky. - N’essayez pas de combiner le défilement sur un axe avec
visiblesur l’autre. Déplacez un menu ou une infobulle qui dépasse en dehors de l’élément défilant.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.