L'adresse qui déborde — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 7)

L'adresse qui déborde

Flexbox · niveau 2

Énoncé

Dans la fiche d'un livre, une rangée flex contient la couverture (60 pixels) et un paragraphe en flex: 1 contenant l'adresse web du livre. Sur téléphone, l'adresse sort de l'écran et une barre de défilement horizontale apparaît. Expliquer, puis corriger en deux déclarations.

Corrigé

Le paragraphe a une largeur minimale automatique égale à son plus long mot, l'adresse : il refuse de rétrécir en dessous, malgré son flex-shrink. Correction :


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

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.media {
  display: flex;
  gap: 12px;
  width: 360px;
  padding: 8px;
  border: 2px solid #1f3a68;
}

.texte {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
}

min-width: 0 autorise l'élément à rétrécir ; overflow-wrap: break-word coupe l'adresse là où il le faut. Dans la page d'exemple, le texte passe de 297,34 à 268 pixels, la largeur disponible.