Warum funktioniert „overflow-wrap: break-word' nicht wie erwartet, wenn es in einem Flexbox-Container verwendet wird?

Flexbox beeinflusst das Overflow-Wrap-Verhalten

Frage:

Warum funktioniert im folgenden Code die Overflow-Wrap-Eigenschaft? Verhalten sich in Kombination mit display: flex nicht wie erwartet?

.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>

Antwort:

Wenn Sie display:flex zum Wrap-Element hinzufügen, wird es zu einem Flexbox-Container . Standardmäßig sind die Elemente in einem Flexbox-Container in einer einzigen Zeile ausgerichtet. Allerdings ist die Eigenschaft „min-width“ von untergeordneten Flexbox-Elementen standardmäßig auf „auto“ eingestellt, sodass sie die erforderliche Mindestbreite einnehmen, um ihren Inhalt aufzunehmen.

Im bereitgestellten Code bedeutet dies, dass die Elemente a und b vorhanden sind gestreckt, um ihrem Inhalt gerecht zu werden. Da Element b einen sehr langen Textinhalt hat, wird die Anzeige einer horizontalen Bildlaufleiste erzwungen.

Um dieses Problem zu beheben, können Sie die Mindestbreite von Element b auf 0 setzen. Dadurch kann es verkleinert werden, damit es passt seinen Inhalt und entfernen Sie die horizontale Bildlaufleiste.

.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>

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow-wrap: break-word' nicht wie erwartet, wenn es in einem Flexbox-Container verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!