Débordement sur mobile : quand un input date casse la grille CSS
Une grille CSS en 1fr 1fr 1fr déborde horizontalement quand un enfant (input date, image, texte long) a une largeur intrinsèque supérieure à la piste allouée : le navigateur applique par défaut une taille minimale basée sur le contenu. Le correctif tient en une ligne : minmax(0, 1fr) sur chaque piste concernée.
C’est un bug silencieux sur desktop et très visible sur mobile, parce que la piste 1fr y est étroite et que le contenu incompressible, lui, ne rétrécit pas. Rien de grave, rien d’irréversible : c’est un comportement documenté de la spécification CSS Grid, pas un bug de ton navigateur ni de ton thème.
Pourquoi ça arrive
- Le dimensionnement par défaut d’une grille n’est pas ce qu’on croit.
grid-template-columns: 1fr 1fr 1fréquivaut en réalité àminmax(auto, 1fr)sur chaque piste, et cette borne minimaleautoautorise le contenu à repousser la taille de la colonne. Le W3C précise que la taille minimale automatique est basée sur le contenu tant que l’overflow calculé n’est pas scrollable, et redevient zéro dans le cas contraire. - Un input de type date a une largeur intrinsèque incompressible. Le navigateur affiche jour, mois, année et les icônes de sélection dans un bloc qui ne se réduit pas en dessous d’un certain seuil, quelle que soit la largeur du parent.
- Une image sans
max-width: 100%garde sa taille naturelle et pousse la piste au-delà de l’espace disponible. - Un texte non cassable (URL longue, référence produit, numéro de téléphone sans espace insécable) se comporte exactement comme une image trop large : le navigateur refuse de le couper.
- Overflow masqué sur grand écran, visible sur petit écran : le débordement existe dès le départ, mais sur une piste large il ne dépasse pas visuellement. C’est le responsive qui le révèle, pas qui le crée.
1. Repérer le débordement dans les DevTools
Ouvre l’inspecteur, réduis la fenêtre en mode responsive sous la largeur qui pose problème, puis clique sur l’élément qui semble décaler la mise en page. Le panneau Grid de Chrome affiche un overlay coloré sur chaque piste avec ses dimensions réelles : si une piste affiche une largeur supérieure à celle attendue, c’est elle la coupable. LogRocket recommande justement cette inspection visuelle plutôt que de deviner en modifiant le CSS à l’aveugle, ce qui réduit nettement le temps de diagnostic.
Vérifie ensuite dans l’onglet Computed la valeur de min-width calculée sur l’élément suspect : si elle n’est pas à 0px, tu tiens ta cause.
2. Le correctif : minmax(0, 1fr) sur la grille
La fonction minmax() consiste à contraindre une piste de grille entre une valeur minimale et une valeur maximale. En remplaçant la borne minimale implicite auto par 0, on empêche la taille du contenu de remonter et de forcer la piste à s’agrandir. MDN documente exactement ce motif pour une grille à trois colonnes égales sans débordement : grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr).
C’est très exactement le correctif qu’on a appliqué chez Peechy à l’été 2026, sur les pages chambres d’un site hôtelier. Sous 417 px de largeur, la page débordait de 85 px horizontalement : un scroll latéral apparaissait, avec la barre de filtre coupée. La cause tenait en une colonne de grille en 1fr contenant un input type="date", dont la largeur intrinsèque incompressible atteignait 136 px, largement au-dessus de l’espace disponible sur mobile. Le correctif a consisté à appliquer minmax(0, 1fr) sur toutes les grilles du site, pas seulement sur celle qui posait problème visiblement : d’autres pistes avaient le même défaut latent, simplement masqué par des largeurs de contenu plus modestes.
La largeur intrinsèque désigne la taille qu’un élément prend naturellement selon son contenu, sans contrainte extérieure. C’est cette valeur, calculée par le navigateur pour l’input date, qui remontait jusqu’à casser la grille.
3. Le cas voisin en flexbox : min-width: auto
Le même mécanisme existe en flexbox, sous un autre nom. Un élément flex a par défaut min-width: auto, ce qui l’autorise à conserver sa taille de contenu (min-content) même si le conteneur est plus étroit. Defensive CSS documente ce piège précisément : un texte ou une image plus grand que l’élément flex qui le contient ne sera pas réduit par le navigateur, comportement par défaut de flexbox. Le correctif est le pendant exact de minmax(0, 1fr) : fixer min-width: 0 sur l’élément flex concerné. BigBinary confirme la même solution sur un cas de carte avec titre long qui casse la mise en page : min-width: 0 permet à l’élément de rétrécir sous sa taille de contenu naturelle.
En disposition colonne, remplace min-width par min-height: 0 sur le même principe, un détail souvent oublié en dépannage mobile parce que le débordement se manifeste verticalement plutôt qu’horizontalement.
4. Les images et vidéos : cas particulier depuis Chrome 108
Avant octobre 2022, les éléments remplacés (img, video, canvas) ignoraient la propriété overflow, ce qui masquait certains débordements liés à object-fit. Depuis Chrome 108, ces éléments respectent overflow, ce qui signifie qu’un object-fit mal calé peut désormais produire un débordement réellement visible là où il était auparavant invisible. Si une image déborde uniquement depuis une mise à jour récente de Chrome, c’est souvent la cause : vérifie le ratio d’aspect déclaré face au ratio réel du fichier, et ajoute max-width: 100% et height: auto sur l’image dans tous les cas, même hors grille. Ce point rejoint d’ailleurs un autre piège CSS classique : des propriétés qui se comportent différemment selon le contexte, sans erreur de syntaxe visible.
5. Auditer toutes les grilles, pas seulement la page cassée
Un débordement visible sur une seule page signale rarement un problème isolé. Comme dans le cas du site hôtelier, la même colonne 1fr sans minmax existe probablement ailleurs sur le site, simplement masquée par un contenu plus court. Passe en revue chaque grid-template-columns du projet, remplace systématiquement 1fr par minmax(0, 1fr) quand la piste peut contenir un champ de formulaire, une image ou un texte non maîtrisé, et refais un test en largeur réduite (320 px, 375 px, 414 px) sur chaque gabarit de page. C’est le même réflexe que pour prioriser les optimisations d’un site : corriger la cause plutôt que le symptôme visible.
| Cause | Symptôme | Correctif |
|---|---|---|
Grille en 1fr (= minmax(auto, 1fr)) | Débordement horizontal sur mobile, scroll latéral | minmax(0, 1fr) sur la piste |
| Input date, select, champ incompressible | Piste plus large que prévu, contenu qui pousse | minmax(0, 1fr) sur la grille, ou largeur fixe sur l’input |
Flex item avec min-width: auto | Texte ou image qui déborde du conteneur flex | min-width: 0 (ou min-height: 0 en colonne) |
| Image sans contrainte de taille | Déborde de sa boîte, surtout depuis Chrome 108 | max-width: 100%, height: auto, object-fit correct |
| Texte non cassable (URL, référence) | Repousse la piste comme une image trop large | overflow-wrap: break-word en complément de minmax(0, 1fr) |
Pourquoi minmax(0, 1fr) et pas simplement 1fr ?
Parce que 1fr seul équivaut à minmax(auto, 1fr) : la borne minimale reste auto, ce qui autorise la taille du contenu à remonter et à forcer la piste à s’agrandir au-delà de l’espace disponible. Remplacer cette borne par 0 supprime cette remontée sans changer le comportement de répartition de l’espace entre les colonnes.
Est-ce que minmax(0, 1fr) casse quelque chose d'autre sur la grille ?
Non, dans l’immense majorité des cas. La valeur 1fr continue de répartir l’espace disponible entre les colonnes de la même façon ; seul le plancher minimal change. Le seul effet visible est que le contenu trop large se coupe ou passe en overflow interne au lieu de repousser la grille entière, ce qui est le comportement souhaité.
Le même problème peut-il venir d'un champ Elementor ou WPBakery plutôt que du CSS pur ?
Oui. Les constructeurs de pages génèrent souvent des grilles en 1fr sans borne minimale explicite. Le diagnostic et le correctif restent identiques : repérer la piste en cause dans les DevTools, puis ajouter minmax(0, 1fr) via le CSS personnalisé du constructeur, faute d’option native pour le faire dans l’interface.
Comment vérifier qu'il ne reste plus de débordement caché ailleurs sur le site ?
Réduis la fenêtre du navigateur en dessous de 375 px sur chaque gabarit de page (accueil, fiche produit, formulaire), et regarde si une barre de scroll horizontale apparaît. Un body { overflow-x: hidden } masque le symptôme sans corriger la cause : mieux vaut le retirer temporairement pendant l’audit pour voir le vrai débordement.
Quand passer la main à un pro
Ce correctif se fait en quelques minutes une fois la piste identifiée. Ce qui prend du temps, c’est l’audit systématique sur un site avec des dizaines de gabarits et de grilles imbriquées, surtout si le CSS a été généré par un constructeur visuel ou une IA de génération de site sans revue humaine derrière. Si le débordement revient après chaque mise à jour de contenu, ou si tu ne sais pas identifier quelle piste est en cause dans les DevTools, c’est le signal pour faire auditer la base CSS plutôt que corriger page par page : c’est exactement ce que couvre une maintenance de site suivie dans la durée, qui repère ces régressions avant qu’un visiteur mobile ne les découvre à ta place.
Ce problème, Peechy s'en occupe
Plutôt que de tout gérer seul, confiez votre site à une agence qui s'occupe de tout, hébergement, sécurité, maintenance et corrections. Encore plus simple en abonnement : on règle les soucis avant même que vous les remarquiez.
Confier mon site à Peechy