Pourquoi « overflow-wrap: break-word » ne fonctionne-t-il pas comme prévu lorsqu'il est utilisé dans un conteneur flexbox ?

Flexbox affecte le comportement de débordement-wrap

Question :

Dans le code suivant, pourquoi la propriété overflow-wrap ne se comporte pas comme prévu lorsqu'il est combiné avec display: flex?

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

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

Réponse :

Lorsque vous ajoutez display: flex à l'élément wrap, il devient un conteneur flexbox . Par défaut, les éléments à l'intérieur d'un conteneur flexbox sont alignés sur une seule ligne. Cependant, la propriété min-width des éléments enfants flexbox est définie sur auto par défaut, ce qui les oblige à occuper la largeur minimale nécessaire pour contenir leur contenu.

Dans le code fourni, cela signifie que les éléments a et b sont étirées pour s'adapter à leur contenu. Étant donné que l'élément b a un contenu textuel très long, il force l'apparition d'une barre de défilement horizontale.

Pour résoudre ce problème, vous pouvez définir la largeur minimale de l'élément b sur 0. Cela lui permettra de se réduire pour s'adapter son contenu et éliminer la barre de défilement horizontale.

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

.b {
  min-width: 0;
}

<div class="wrap">
  <div class="a">first div</div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>

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!