HomeCasa Prompts

Corriger un problème de mise en page CSS (Flexbox, Grid, débordements et z-index)

Comprenez pourquoi votre CSS ne fait pas ce que vous attendez (débordements, éléments mal centrés, z-index sans effet) avec la cause expliquée, sa vérification dans les DevTools et la correction minimale. Conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Il comprend 5 variables personnalisables et vous pouvez le copier gratuitement en un clic.

Débutant · Code · En attente de relecture éditoriale

Conçu pour:

Prompt

Agis comme un expert CSS qui explique clairement les causes des problèmes de mise en page, sans rustines.

Contexte :
- HTML concerné : {{html}}
- CSS concerné : {{css}}
- Ce qui se passe : {{probleme}}
- Ce que j'attendais : {{attendu}}
- Où cela se produit : {{contexte}}

Si le problème peut venir d'un élément parent, de styles globaux ou d'un framework absent du code, demande-moi cette partie avant de proposer une solution.

Livrables :
1. La cause racine expliquée simplement, en nommant le concept en jeu (modèle de boîte, min-width: auto des éléments flex, débordement des pistes Grid en 1fr, fusion des marges, contextes d'empilement, positionnement, unités de viewport sur mobile).
2. Comment la confirmer pas à pas dans les DevTools du navigateur : quel élément inspecter, quel panneau regarder (valeurs calculées, superpositions Flexbox et Grid, calques) et quelle valeur trahit le problème.
3. La correction minimale avec le code exact qui change, avant et après.
4. Une alternative plus robuste si la correction minimale est fragile, avec ses avantages et inconvénients.
5. Des vérifications pour ne rien casser : autres largeurs d'écran, textes plus longs, autres navigateurs.
6. Une règle pratique courte pour éviter ce problème à l'avenir.

Contraintes :
- Pas de !important, de valeurs magiques ni d'overflow: hidden pour masquer le symptôme, sauf justification.
- Ne réécris pas toute la feuille de style : modifie seulement le nécessaire.
- Si le problème n'est pas reproductible avec le code fourni, dis-le et explique ce qui manque.

Format : cause, vérification, correction avec blocs de code, alternative et liste de vérifications.

Comment l'utiliser

  1. Réduis le HTML et le CSS au strict minimum où le bug apparaît, conteneur parent compris. 2. Décris ce que tu vois et ce que tu attendais, avec la largeur d’écran et le navigateur. 3. Applique la correction, fais les vérifications et reviens avec le résultat si le problème persiste.

Exemple d'utilisation

Problème : sur mobile la page défile horizontalement et une carte de la grille déborde · Attendu : deux colonnes qui s’adaptent à la largeur · Où : Safari sur iPhone, moins de 400 px.

Exemple de résultat

Cause

1fr équivaut à minmax(auto, 1fr) : le minimum de chaque colonne est la largeur minimale de son contenu. Avec white-space: pre, le <pre> ne peut pas revenir à la ligne ; sa ligne la plus longue fixe ce minimum et la colonne dépasse l'écran.

Comment le confirmer

Dans les DevTools, activez la superposition Grid sur .grille : la deuxième piste dépasse du conteneur. Dans « Calculé », le <pre> est plus large que le viewport.

Correction minimale

/* Avant */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Après */
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.carte pre { white-space: pre; overflow-x: auto; }

minmax(0, 1fr) permet à la colonne de rétrécir sous la taille de son contenu, et overflow-x: auto limite le défilement au bloc de code au lieu de toute la page.

Alternative plus robuste

Une seule colonne sur écran étroit : grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)).

Règle pratique

Si une piste 1fr contient du texte insécable, utilisez minmax(0, 1fr) ou min-width: 0 sur l'enfant…

Informations clés

Catégorie
Programmation et développement · HTML et CSS
Type de résultat
Code
Niveau
Débutant
Conçu pour
ChatGPT, Claude, Gemini et Microsoft Copilot
Vérifié sur
En attente de vérification éditoriale
Variables
HTML concerné, CSS concerné, Ce qui se passe, Ce que j’attendais et Où cela se produit
Langue
Français
Prix
Gratuit, sans inscription
Mis à jour
07/11/2026

Questions fréquentes

Pourquoi mon z-index ne fonctionne-t-il pas ?

Presque toujours parce que les éléments sont dans des contextes d’empilement différents : un parent avec transform, une opacité inférieure à 1, un positionnement avec z-index ou isolation en crée un nouveau, et le z-index ne joue qu’à l’intérieur.

Pourquoi un élément flex ne rétrécit-il pas malgré le manque de place ?

Les éléments flex ont min-width: auto par défaut et ne descendent pas sous la taille de leur contenu, comme un mot long ou une image. Ajouter min-width: 0 à l’élément règle souvent le problème.

Comment trouver l’élément qui provoque le défilement horizontal ?

Dans les DevTools, cherche l’élément plus large que la fenêtre avec les superpositions de layout ou un outline temporaire sur tous les éléments. Le prompt te guide dans cette vérification.

À quoi sert ce prompt ?

Comprenez pourquoi votre CSS ne fait pas ce que vous attendez (débordements, éléments mal centrés, z-index sans effet) avec la cause expliquée, sa vérification dans les DevTools et la correction minimale.

Avec quels outils d'IA fonctionne-t-il ?

Il est conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.

Comment personnaliser le prompt ?

Cliquez sur « Personnaliser » et remplissez les variables (HTML concerné, CSS concerné, Ce qui se passe, Ce que j’attendais et Où cela se produit). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.

Faut-il de l'expérience pour l'utiliser ?

Non. C'est un prompt de niveau débutant : il suffit de remplir les détails et de le coller dans votre outil d'IA.

Ce prompt est-il gratuit ?

Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.

Puis-je me fier au résultat de l'IA ?

Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.

Prompts similaires