CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 8 · Application directe du cours
Une colonne qui déborde
Grid · niveau 2
Énoncé
Dans la page debordement.html du dossier code/ch8/erreurs, la grille de 600 pixels a pour colonnes 3fr 1fr, avec des gouttières de 20 pixels. La colonne principale contient une commande d'installation dans un bloc <pre> doté de overflow-x: auto. On attend des colonnes de 435 et 145 pixels ; Chromium affiche 611,11 et 97,69 pixels, et la grille dépasse de son conteneur. Expliquer, puis corriger.
Corrigé
3fr vaut minmax(auto, 3fr) : la colonne ne peut pas descendre sous la largeur minimale de son contenu. Or la ligne du bloc <pre> ne se coupe pas : sa largeur minimale est celle de toute la commande. La propriété overflow-x: auto ne sert à rien tant que la colonne s'élargit pour tout montrer.
Avec grid-template-columns: minmax(0, 3fr) 1fr, le minimum de la colonne devient 0 : les colonnes mesurent bien et 145 pixels (vérifié dans Chromium), et c'est le bloc <pre>, trop étroit, qui défile horizontalement. Une alternative est min-width: 0 sur l'élément de grille <main>, qui abaisse lui aussi la largeur minimale auto.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.