☰

フレックスコンテナ内のテキストがIE11で折り返されない 質問する

tag-icon • tag-icon css internet-explorer flexbox internet-explorer-11
フレックスコンテナ内のテキストがIE11で折り返されない 質問する

次のスニペットを検討してください。

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}
<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Chrome では、テキストは期待どおりに折り返されます。

ここに画像の説明を入力してください

しかし、IE11では、テキストが折り返されていない:

ここに画像の説明を入力してください

これは IE の既知のバグですか? (もしそうなら、指摘していただけるとありがたいです)

既知の回避策はありますか?

同様の質問明確な答えや公式の指針はありません。

ベストアンサー1

コードに以下を追加します:

.child { width: 100%; }

ブロックレベルの子要素は親要素の幅全体を占める必要があることはわかっています。

Chrome はこれを理解しています。

IE11 では、何らかの理由で明示的なリクエストが必要です。

flex-basis: 100%またはを使用するflex: 1こともできます。

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}
<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

注: どのコンテナーが を取得するかを正確に特定するために、HTML 構造のさまざまなレベルを並べ替える必要がある場合がありますwidth: 100%。CSS ラップテキストが IE で機能しない

おすすめ記事