Overflow et dimensions

Quand un contenu dépasse son conteneur, c'est overflow qui décide du rendu.

Valeurs courantes :

• visible (par défaut)
• hidden
• auto
• scroll

Exemple

.panel {
  width: 280px;
  max-height: 180px;
  padding: 1rem;
  overflow: auto;
}

Dimensions utiles

• width / height : taille imposée
• min-width / min-height : limite basse
• max-width / max-height : limite haute

Pattern recommandé :

• utiliser max-width pour éviter des lignes trop longues
• utiliser min-height pour stabiliser certains blocs
• laisser la hauteur s'adapter au contenu autant que possible

Erreurs fréquentes

• forcer height partout puis subir des débordements
• masquer du contenu important avec overflow: hidden
• oublier de tester les gros textes et contenus dynamiques

A retenir

Un bon contrôle des dimensions rend l'interface robuste, même avec des contenus plus longs que prévu.

Mini pratique

Crée une carte avec texte long. Teste overflow: hidden, puis auto, et compare l'expérience utilisateur.