フレックスコンテナー内のテキストが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の既知のバグですか？（はいの場合は、ポインタが高く評価されます）

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

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

これをコードに追加します。

.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で機能しない

私は同じ問題を抱えていましたが、要点は、要素がその幅をコンテナーに適合させていなかったことです。

を使用する代わりにwidth:100%、一貫性を保ち（フローティングモデルとflexモデルを混在させないでください）、以下を追加してflexを使用します。

.child { align-self: stretch; }

または：

.parent { align-items: stretch; }

これでうまくいきました。

タイラーは使用して、ここでコメントの一つで提案しています

max-width: 100%;

子供の上で働くかもしれません（私のために働いた）。使用していalign-self: stretchない場合にのみ機能しますalign-items: center（私がやっています）。width: 100%並べて表示するフレックスボックス内に複数の子がない場合にのみ機能します。

こんにちは、祖父母の要素に100％の幅を適用する必要がありました。子要素ではありません。

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

どういうわけか、これらのソリューションはすべて私にとってはうまくいきませんでした。にIEのバグがあることは明らかflex-direction:columnです。

私はそれを削除した後にのみ機能しましたflex-direction：

flex-wrap: wrap;
align-items: center;
align-content: center;

提案された解決策は、 "。child {width：100％;}"の助けにはなりませんでした。これは、マークアップがより複雑になったためです。しかし、私は解決策を見つけました-「align-items：center;」を削除すると、このケースでも機能します。

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

100％一貫してこのフレックス方向列のバグを回避できた唯一の方法は、最小幅のメディアクエリを使用して、デスクトップサイズの画面の子要素に最大幅を割り当てることです。

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

修正を機能させるには、自然にインラインの子要素（例：<span>または<a>）をインライン以外（主にdisplay：blockまたはdisplay：inline-block）に設定する必要があります。

私はここに私の解決策を見つけませんでした、おそらく誰かが役に立つでしょう：

.child-with-overflowed-text{
  word-wrap: break-all;
}

幸運を！

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

これでうまくいきました。

私もこの問題に遭遇しました。

唯一の選択肢は、子要素で幅（または最大幅）を定義することです。IE 11は少しばかげています。私はこのソリューションを実現するために20分を費やしました。

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

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

フレックスラッパーで画像がオーバーフローする問題についても同様の問題がありました。

オーバーフローする子に修正するかflex-basis: 100%;、追加することでflex: 1;うまくいきました。

単純なソリューションでも機能するのに、なぜ複雑なソリューションを使用するのですか？

.child {
  white-space: normal;
}