Mission

Mission : une messagerie où le texte fait exploser la mise en page

Diagnostiquer un conflit flex-basis / width et une troncature bloquée, puis livrer la correction précise.

Contexte

Sur messagerie.css, chaque message a une carte .message en display: flex avec deux enfants : .avatar (flex: 0 0 48px;) et .contenu (width: 300px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;). Le développeur pensait fixer .contenu à exactement 300px, mais le nom d'expéditeur très long pousse toute la carte à s'élargir bien au-delà, sans jamais se tronquer.