CSS : supprimer une barre de défilement horizontale indésirable

Une barre de défilement horizontale qui apparaît sans raison apparente, c’est l’un des petits bugs CSS les plus agaçants. Le site semble presque correct, puis l’on remarque que la page peut glisser de quelques pixels vers la droite. Super. Une feature que personne n’a demandée.

Historiquement, on réglait souvent ce problème avec une règle brutale :

html {
    overflow-x: hidden;
}Langage du code : CSS (css)

Cette règle masque bien la barre de défilement horizontale. Toutefois, elle ne corrige pas forcément la cause du problème. Aujourd’hui, la bonne approche consiste plutôt à identifier l’élément qui déborde, corriger sa largeur, puis utiliser overflow-x seulement en dernier recours.

Pourquoi une barre de défilement horizontale apparaît ?

Une barre horizontale apparaît lorsqu’un élément dépasse la largeur du viewport ou de son conteneur. Le navigateur fait alors son travail : il ajoute un scroll horizontal pour permettre d’accéder au contenu qui déborde.

Les causes les plus fréquentes sont :

• un élément en width: 100vw combiné à du padding ou à une scrollbar verticale ;
• une image, une vidéo ou un iframe sans max-width: 100% ;
• un conteneur en width: 100% avec padding sans box-sizing: border-box ;
• une grille CSS trop large ;
• un élément flex qui refuse de rétrécir ;
• un mot, une URL ou un bloc de code trop long ;
• un élément positionné avec left, right, transform ou une marge négative ;
• une animation qui sort temporairement du viewport ;
• un bloc WordPress aligné en pleine largeur mal contenu par le thème.

La tentation consiste à masquer le débordement. Parfois, c’est acceptable. Mais dans la plupart des cas, il vaut mieux trouver l’élément fautif. Sinon, vous cachez la fumée pendant que le grille-pain continue de brûler.

La solution rapide : masquer le débordement horizontal

Si vous voulez supprimer rapidement la barre horizontale, vous pouvez utiliser :

html,
body {
    overflow-x: hidden;
}Langage du code : CSS (css)

Cette règle empêche le défilement horizontal sur la page. Elle peut dépanner lorsque le débordement vient d’une animation, d’un léger écart de calcul ou d’un composant tiers difficile à modifier.

Cependant, je ne l’utiliserais pas comme première correction. Elle masque le symptôme, mais elle peut aussi cacher un vrai problème de layout : image trop large, bloc mal dimensionné, menu mobile qui dépasse, table non responsive, ou section pleine largeur cassée.

La méthode propre consiste donc à diagnostiquer d’abord, puis à corriger précisément.

Diagnostiquer l’élément qui déborde

Ouvrez les DevTools du navigateur, puis utilisez ce petit snippet dans la console pour trouver les éléments plus larges que la fenêtre :

[...document.querySelectorAll('*')]
    .filter((element) => element.scrollWidth > document.documentElement.clientWidth)
    .forEach((element) => {
        console.log(element, {
            scrollWidth: element.scrollWidth,
            clientWidth: document.documentElement.clientWidth,
        });
    });Langage du code : JavaScript (javascript)

Ce code liste les éléments dont la largeur de contenu dépasse la largeur visible du document. Il ne donne pas toujours le coupable final du premier coup, mais il réduit fortement la zone de recherche.

Vous pouvez aussi ajouter temporairement un contour à tous les éléments pour repérer visuellement le débordement :

* {
    outline: 1px solid rgba(255, 0, 0, 0.25);
}Langage du code : CSS (css)

Ne laissez évidemment pas cette règle en production. Elle est uniquement là pour le diagnostic.

Corriger les images, vidéos et iframes trop larges

Les médias trop larges sont une cause classique de scroll horizontal. La base CSS à avoir sur presque tous les sites modernes :

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}Langage du code : CSS (css)

Pour les images et vidéos, j’ajoute généralement :

img,
video {
    height: auto;
}Langage du code : CSS (css)

Ainsi, le média ne dépasse pas son conteneur, tout en conservant ses proportions.

Pour un iframe, notamment YouTube, Vimeo, Google Maps ou un embed externe, utilisez un conteneur responsive :

.embed-responsive {
    aspect-ratio: 16 / 9;
    max-width: 100%;
}

.embed-responsive iframe {
    width: 100%;
    height: 100%;
    border: 0;
}Langage du code : CSS (css)

Et le HTML correspondant :

<div class="embed-responsive">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
</div>Langage du code : HTML, XML (xml)

Corriger les problèmes de box-sizing

Un autre grand classique : un élément en width: 100% avec du padding. Par défaut, la propriété width ne comprend pas le padding ni la bordure. Résultat : l’élément peut dépasser son conteneur.

La règle moderne à appliquer globalement :

*,
*::before,
*::after {
    box-sizing: border-box;
}Langage du code : CSS (css)

Avec box-sizing: border-box, la largeur déclarée inclut le contenu, le padding et la bordure. Cela rend les layouts beaucoup plus prévisibles.

Si votre thème WordPress ne l’applique pas déjà, cette règle peut corriger beaucoup de débordements discrets.

Attention à width: 100vw

width: 100vw semble pratique pour créer une section pleine largeur. Pourtant, c’est aussi une cause fréquente de scroll horizontal.

Pourquoi ? Parce que 100vw représente la largeur du viewport, et peut inclure la largeur de la scrollbar verticale. Si le document a déjà une scrollbar verticale, un élément en 100vw peut dépasser légèrement la largeur visible du document.

Dans beaucoup de cas, remplacez :

.section {
    width: 100vw;
}Langage du code : CSS (css)

par :

.section {
    width: 100%;
}Langage du code : CSS (css)

Ou utilisez une approche pleine largeur plus contrôlée :

.full-bleed {
    margin-inline: calc(50% - 50vw);
    padding-inline: max(1rem, calc(50vw - 50%));
}Langage du code : CSS (css)

Cette technique permet de créer un effet pleine largeur tout en gardant le contenu aligné avec le conteneur principal. Elle reste à tester selon votre thème, surtout dans WordPress avec des blocs alignés en pleine largeur.

Corriger les layouts flex qui débordent

En Flexbox, certains éléments refusent de rétrécir comme prévu, notamment lorsqu’ils contiennent du texte long, une image, un code, une table ou un lien très long.

La correction fréquente consiste à ajouter min-width: 0 sur les enfants flexibles :

.layout {
    display: flex;
    gap: 1rem;
}

.layout__content {
    flex: 1 1 auto;
    min-width: 0;
}Langage du code : CSS (css)

min-width: 0 autorise l’élément à rétrécir dans son conteneur. Sans cette règle, le navigateur peut conserver une largeur minimale basée sur le contenu, et créer un débordement horizontal.

Corriger les grilles CSS trop larges

Avec CSS Grid, le piège classique vient des colonnes en 1fr qui ne rétrécissent pas assez lorsque leur contenu est long.

Au lieu de :

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}Langage du code : CSS (css)

Utilisez :

.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
}Langage du code : CSS (css)

Le minmax(0, 1fr) force les colonnes à pouvoir réellement se contracter. Cela évite qu’un contenu long pousse toute la grille hors du viewport.

Pour une grille responsive, préférez aussi :

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
}Langage du code : CSS (css)

Cette version évite les colonnes plus larges que le conteneur sur les petits écrans.

Gérer les textes, URLs et blocs de code trop longs

Un lien très long, une URL, une chaîne sans espace ou une ligne de code peut provoquer un débordement horizontal.

Pour le contenu éditorial classique :

.entry-content {
    overflow-wrap: break-word;
}Langage du code : CSS (css)

Pour les blocs de code, il vaut mieux autoriser un scroll horizontal local au bloc, plutôt que sur toute la page :

pre,
code {
    max-width: 100%;
}

pre {
    overflow-x: auto;
}Langage du code : CSS (css)

Cette approche garde la page stable, tout en permettant de lire une longue ligne de code. C’est particulièrement utile sur un blog technique.

Cas WordPress : blocs alignwide et alignfull

Sur WordPress, les blocs Gutenberg peuvent utiliser des alignements larges ou pleine largeur : .alignwide et .alignfull. Selon le thème, ces blocs peuvent provoquer un scroll horizontal si leur largeur est mal calculée.

Une base prudente :

.entry-content .alignwide,
.entry-content .alignfull {
    max-width: 100%;
}Langage du code : CSS (css)

Si un bloc pleine largeur utilise 100vw, vérifiez qu’il ne crée pas un dépassement lié à la scrollbar verticale.

Pour les images, vidéos et embeds dans le contenu WordPress :

.entry-content img,
.entry-content video,
.entry-content iframe {
    max-width: 100%;
}Langage du code : CSS (css)

Pour les tables Gutenberg, autorisez un scroll local :

.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    width: max-content;
    max-width: 100%;
}Langage du code : CSS (css)

Selon le thème, vous pouvez préférer width: 100% sur les tables. L’idée reste la même : éviter que toute la page scrolle horizontalement à cause d’un seul tableau.

Faut-il utiliser overflow-x: hidden ou overflow-x: clip ?

overflow-x: hidden masque le contenu qui déborde horizontalement et empêche généralement le scroll horizontal. C’est la solution historique.

CSS propose aussi overflow: clip, qui coupe le contenu sans créer de mécanisme de défilement. En pratique, pour un document entier, overflow-x: hidden reste encore très utilisé et plus prévisible selon les projets.

Je l’utiliserais plutôt ainsi, en filet de sécurité, après avoir corrigé les causes principales :

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}Langage du code : CSS (css)

Sur un composant précis, vous pouvez préférer :

.component {
    overflow-x: clip;
}Langage du code : CSS (css)

Mais, encore une fois, ne commencez pas par là. Si une image de 2400 pixels déborde d’un conteneur mobile, le problème n’est pas le scroll. Le problème, c’est l’image qui se prend pour un panneau publicitaire.

Snippet CSS de base pour éviter les débordements

Voici un reset léger que j’utilise volontiers comme base sur des thèmes modernes :

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

pre {
    max-width: 100%;
    overflow-x: auto;
}

.entry-content {
    overflow-wrap: break-word;
}Langage du code : CSS (css)

Et si, après diagnostic, vous avez encore un léger débordement causé par un composant tiers ou une animation, ajoutez en dernier recours :

html,
body {
    overflow-x: hidden;
}Langage du code : CSS (css)

Checklist de diagnostic

Quand une page affiche une barre horizontale, je vérifie dans cet ordre :

• images, vidéos, iframes et embeds trop larges ;
• éléments en width: 100vw ;
• sections avec marges négatives ;
• conteneurs avec padding et sans box-sizing: border-box ;
• enfants flex sans min-width: 0 ;
• colonnes grid sans minmax(0, 1fr) ;
• tables non responsives ;
• blocs de code trop longs ;
• menus mobiles ou off-canvas mal cachés ;
• animations qui sortent du viewport.

Si tout cela est corrigé, alors seulement j’envisage overflow-x: hidden au niveau global.

Conclusion

Pour supprimer une barre de défilement horizontale, la règle historique fonctionne toujours :

html {
    overflow-x: hidden;
}Langage du code : CSS (css)

Mais ce n’est pas la meilleure première réponse. Aujourd’hui, il vaut mieux identifier l’élément qui déborde, corriger sa largeur, rendre les médias responsives, sécuriser box-sizing, puis gérer les cas particuliers comme Flexbox, Grid, les tables et les blocs de code.

La règle globale overflow-x: hidden reste utile comme filet de sécurité. Toutefois, elle doit venir après le diagnostic, pas avant.

Sources

• MDN : overflow-x
• MDN : box-sizing
• MDN : width
• MDN : CSS Flexbox
• MDN : CSS Grid Layout
• WordPress Developer Resources : spacing et layout

Report a typo