Esnek bir kaptaki metin IE11'de sarılmıyor

Aşağıdaki snippet'i düşünün:

.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'da metin beklendiği gibi kaydırılıyor:

Ancak, IE11'de metin kaydırılmıyor :

Bu IE bilinen bir hata mı? (evet ise, bir işaretçi takdir edilecektir)

Bilinen bir geçici çözüm var mı?

Bu benzer sorunun kesin bir cevabı ve resmi bir göstergesi yok.

Bunu kodunuza ekleyin:

.child { width: 100%; }

Blok düzeyinde bir çocuğun ebeveyninin tüm genişliğini işgal etmesi gerektiğini biliyoruz.

Chrome bunu anlıyor.

IE11, hangi nedenle olursa olsun, açık bir istek ister.

flex-basis: 100%Veya kullanarak flex: 1da çalışır.

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

Not: Bazen hangi kapsayıcıyı alacağını belirlemek için HTML yapısının çeşitli düzeylerinde sıralamak gerekebilir width: 100%. CSS sarma metni IE'de çalışmıyor

Aynı sorunu yaşadım ve mesele, elemanın genişliğini kaba uyarlamamasıydı.

Bunun yerine kullanmanın width:100%, tutarlı olmak , bu ekleyerek ve kullanım esnekliğini (yüzen model ve esnek bir model karışmaz):

.child { align-self: stretch; }

Veya:

.parent { align-items: stretch; }

Bu benim için çalıştı.

Tyler'ın buradaki yorumlardan birinde önerdiği gibi ,

max-width: 100%;

Çocuk üzerinde çalışabilir (benim için çalıştı). Kullanmak ( align-self: stretcheğer align-items: centeryaptığım) kullanmıyorsanız çalışır . width: 100%yalnızca flexbox'ınızda yan yana göstermek istediğiniz birden fazla çocuğunuz yoksa çalışır.

Merhaba benim için% 100 genişliğini büyükbaba veya büyükanne elemanına uygulamak zorunda kaldım. Alt öğeleri değil.

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

Bir şekilde tüm bu çözümler benim için işe yaramadı. Açıkça bir IE hatası varflex-direction:column .

Sadece kaldırdıktan sonra çalıştım flex-direction:

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

Önerilen çözümler, ".child {width: 100%;}" konusunda bana yardımcı olmadı, çünkü daha karmaşık bir işaretlemem vardı. Ancak, bir çözüm buldum - "align-items: center;" öğesini kaldırın ve bu durumda da işe yarar.

.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 tutarlı bir şekilde bu esnek yön sütun hata önlemek mümkün olan tek yolu, masaüstü boyutlu ekranlarda alt öğeye bir maksimum genişlik atamak için bir min genişlikli medya sorgusu kullanmaktır.

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

Düzeltmenin çalışması için satır içi alt öğeleri (örn. <span>Veya <a>) satır içi dışında bir öğeye ( esas olarak display: block veya display: inline-block) ayarlamanız gerekir.

Çözümümü burada bulamadım, belki birisi yararlı olacaktır:

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

İyi şanslar!

.grandparent{
   display: table;
}

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

Bu benim için çalıştı.

Ben de bu sorunla karşılaştım.

Tek alternatif, alt elemanlarda bir genişlik (veya maksimum genişlik) tanımlamaktır. IE 11 biraz aptalca ve ben sadece bu çözümü gerçekleştirmek için 20 dakika geçirdim.

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

Esnek bir sarmalayıcıda taşan görüntülerle benzer bir sorun yaşadım.

Ya taşan çocuğa ya flex-basis: 100%;da flex: 1;sabitlenmiş eklemek benim için çalıştı.

Basit bir çözüm de işe yarıyorsa neden karmaşık bir çözüm kullanıyorsunuz?

.child {
  white-space: normal;
}