IE11 Flex コンテナーでテキストが折り返されないのはなぜですか?それを修正するにはどうすればよいですか?

IE11 のフレックス コンテナーの折り返しの問題: 解決策と回避策

フレックス コンテナーを使用してテキスト要素を配置すると、テキストがChrome と IE11 ではラッピングの動作が異なります。具体的には、IE11 では、フレックス コンテナ内のテキストの折り返しに失敗し、オーバーフローが発生します。

既知のバグと回避策

これは、IE11 の既知のバグです。この問題を解決するには、フレックス コンテナ内の子要素の幅を明示的に指定する必要があります。次の CSS ルールをコードに追加すると、ラッピングの問題が解決されるはずです。

.child {
  width: 100%;
}

代替回避策

代替回避策には、flex-basis: 100% または flex: の使用が含まれます。子要素に 1。これらのオプションは、IE11 に、フレックス コンテナー内のブロック レベルの子要素の意図された全幅占有を理解し、尊重することも強制します。

例

.child {
  flex-basis: 100%;
}

説明

IE11 では、子要素の幅を認識するために明示的な幅宣言が必要です。親フレックス コンテナ内の使用可能なスペースをすべて占有します。対照的に、Chrome は、この明示的な宣言がなくても、予期されるラッピング動作を示します。

以上がIE11 Flex コンテナーでテキストが折り返されないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。