# Overflow dans les Containers Elementor : le bug de scroll caché > Après le passage aux Containers Flexbox, un contenu débordait silencieusement sans barre de défilement visible. Diagnostic d'un bug récurrent et son correctif. - Auteur : Clément Hadrot - Publié le : 2022-08-09 - Mis à jour le : 2022-08-09 - Catégorie : Elementor - URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/overflow-containers-elementor-bug-scroll-cache/ ## L’essentiel - Un container Flexbox sans propriété overflow définie peut laisser déborder son contenu invisiblement - Le débordement horizontal ajoute une barre de scroll globale à toute la page, pas seulement à l'élément fautif - La propriété Overflow d'Elementor doit être vérifiée sur tout container à largeur ou hauteur fixe Après la migration d'un site de trente pages des anciennes Sections vers les nouveaux Containers Flexbox, un contrôle qualité systématique a révélé un problème étrange sur trois pages : une légère barre de défilement horizontale apparaissait en bas de l'écran, sans qu'aucun élément visible ne semble déborder du cadre à l'œil nu. Le contenu paraissait parfaitement aligné, et pourtant la page s'étirait de quelques pixels au-delà du viewport. Ce genre de symptôme est particulièrement frustrant à déboguer car il n'existe aucune erreur dans la console, aucun message d'Elementor, et l'élément responsable du débordement n'est identifiable qu'en inspectant patiemment le DOM avec les outils de développement du navigateur. ## Symptôme : une barre de scroll fantôme Sur les trois pages concernées, la barre de défilement horizontale n'apparaissait qu'en bas de la fenêtre du navigateur, sans lien apparent avec le contenu visible à l'écran. En zoomant à 50 % dans le navigateur pour voir l'ensemble de la largeur de page, l'origine devenait visible : un container contenant une icône décorative légèrement plus large que sa colonne parente, en raison d'une taille de police fixée en pixels combinée à un padding non pris en compte dans le calcul de largeur du container Flexbox. ## Diagnostic : localiser l'élément fautif > L'essentiel à retenir : Un container Flexbox sans propriété overflow définie peut laisser déborder son contenu invisiblement ; Le débordement horizontal ajoute une barre de scroll globale à toute la page, pas seulement à l'élément fautif ; La propriété Overflow d'Elementor doit être vérifiée sur tout container à largeur ou hauteur fixe 1. Ouvrir les outils de développement du navigateur, onglet Éléments 2. Sélectionner la balise `` et observer sa largeur réelle affichée dans l'onglet Computed 3. Si cette largeur dépasse celle de la fenêtre du navigateur, un élément enfant déborde quelque part dans l'arborescence 4. Utiliser un court script dans la console pour repérer automatiquement l'élément fautif plutôt que de chercher manuellement ``` document.querySelectorAll('*').forEach(el => { if (el.scrollWidth > document.documentElement.clientWidth) { console.log(el); } }); ``` Ce script, exécuté dans la console du navigateur, liste tous les éléments dont la largeur de contenu dépasse celle de la page visible, ce qui a permis de remonter directement au widget icône fautif sans inspecter toute l'arborescence à la main. ## Le correctif : la propriété Overflow Une fois l'élément identifié, le correctif consiste à définir explicitement la propriété Overflow du container parent concerné, disponible dans l'onglet Avancé du panneau Elementor, section Container. Par défaut, cette propriété n'est pas définie, ce qui laisse le comportement natif du navigateur gérer le débordement — et ce comportement natif, en Flexbox, peut laisser un élément légèrement déborder sans jamais tronquer ni faire apparaître de barre de défilement locale, poussant ainsi le débordement au niveau de la page entière. - Régler Overflow sur « Hidden » pour les containers dont le contenu ne doit jamais dépasser visuellement le cadre défini - Régler Overflow sur « Auto » lorsque le débordement doit rester scrollable localement, par exemple pour un container à hauteur fixe contenant une longue liste - Vérifier systématiquement cette propriété sur tout container combinant une largeur fixe et un contenu dont la taille dépend d'une police ou d'un padding variable ### Prévention pour les prochains projets Depuis cet incident, l'agence a ajouté une étape à sa check-list de contrôle qualité post-migration : ouvrir chaque page en zoom réduit (25 à 50 %) pour repérer visuellement toute barre de défilement horizontale inattendue, avant même de tester le responsive sur mobile. Cette vérification prend moins d'une minute par page et détecte la quasi-totalité des débordements silencieux avant qu'un client ne les signale. > Un débordement horizontal invisible à l'œil nu reste l'un des bugs les plus difficiles à repérer sur un Container Flexbox : le script de détection en console doit devenir un réflexe systématique après toute migration de Sections vers Containers. ## En résumé Le passage aux Containers Flexbox introduit un comportement de débordement différent des anciennes Sections, moins tolérant visuellement mais plus difficile à repérer sans outillage. La propriété Overflow, souvent laissée à sa valeur par défaut, mérite une vérification systématique sur tout container à dimension contrainte. Sur ce projet, corriger la propriété sur le seul widget icône fautif a suffi à faire disparaître la barre de défilement sur les trois pages concernées.