Voici quelques options de titre basées sur votre article, en gardant à l'esprit le format de la question : Général et axé sur la problématique : * Pourquoi `overflow-wrap: break-word` provoque-t-il des barres de défilement dans Flexbox ? *F

Impact de Flexbox sur le comportement de débordement-wrap

En CSS, la propriété overflow-wrap: break-word demande au navigateur de diviser les mots longs en plusieurs lignes. Cependant, lorsqu'il est utilisé conjointement avec la propriété display: flex, ce comportement devient imprévisible.

Problème :

Comme démontré dans l'extrait fourni, lorsque display: flex est ajouté à un élément avec overflow-wrap: break-word, une barre de défilement horizontale apparaît. Ce comportement vient du fait que les éléments flexbox ont une largeur minimale automatique de auto, ce qui les amène à s'étendre pour s'adapter à leur contenu.

Solution :

Pour éliminer le barre de défilement horizontale, définissez la propriété min-width de l'enfant flexbox concerné sur 0. Cela empêche l'élément de s'étendre au-delà de sa taille naturelle, permettant ainsi au contenu long de s'enrouler dans la largeur disponible.

Code modifié :

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0; /* ADDED */
}

Cette modification garantit que le contenu long dans .b s'enroule comme prévu sans provoquer l'apparition de la barre de défilement horizontale.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!