フレックスボックス コンテナ内で使用すると、「overflow-wrap: Break-word」が期待どおりに動作しないのはなぜですか?

フレックスボックスはオーバーフローラップ動作に影響します

質問:

次のコードで、オーバーフローラッププロパティが影響を受けるのはなぜですか? 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>

回答:

display: flex をラップ要素に追加すると、フレックスボックス コンテナーになります。デフォルトでは、フレックスボックス コンテナ内の要素は 1 行に配置されます。ただし、フレックスボックスの子要素の min-width プロパティはデフォルトで auto に設定されているため、コンテンツを保持するために必要な最小幅が占有されます。

提供されたコードでは、これは要素 a と b がコンテンツに合わせて引き伸ばされます。要素 b には非常に長いテキスト コンテンツがあるため、水平スクロールバーが強制的に表示されます。

この問題を解決するには、要素 b の min-width を 0 に設定します。これにより、要素 b を縮小してフィットさせることができます。そのコンテンツを削除し、水平スクロールバーを削除します。

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

以上がフレックスボックス コンテナ内で使用すると、「overflow-wrap: Break-word」が期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。