web-dev-qa-db-ja.com

フレックスコンテナ内のテキストが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では、テキストは期待通りに折り返されています。

enter image description here

しかし、IE11では、テキストは折り返されていません。

enter image description here

これはIEの既知のバグですか？ （そうであれば、ポインタが高く評価されます）

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

この同様の質問 は明確な答えと公式の指針を持っていません。

csscss3internet-explorerflexboxinternet-explorer-11
131
Misha Moroshko

これをあなたのコードに追加してください：

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

注：どのコンテナがwidth: 100%を取得するかを特定するために、さまざまなレベルのHTML構造をソートする必要がある場合があります。 CSS折り返しテキストはIEでは機能しません

212
Michael_B

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

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

.child { align-self: stretch; }

または

.parent { align-items: stretch; }

これは私のために働きました。

30
Andry

As Tyler がここのコメントの1つで示唆しているように、

max-width: 100%;

子供の上で動作する可能性があります（私のために働いた）。 align-self: stretchの使用は、align-items: centerを使用していない場合にのみ有効です。 width: 100%は、Flexbox内に複数の子を並べて表示したくない場合にのみ機能します。

7
dude

こんにちは私はその祖父母の要素に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;
}
5
Angus Grant

私がより複雑なマークアップを持っていたので、提案された解決策は ".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>
0
Petr Varyagin

私が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）に設定する必要があります。

0
Daniel Tonon

どういうわけかこれらすべての解決策は私のためにうまくいきませんでした。 flex-direction:columnには明らかにIEバグがあります。

私はflex-directionを削除した後にそれが動作するようにしました：

flex-wrap: wrap;
align-items: center;
align-content: center;
0
Fabian von Ellerts