Teks dalam wadah fleksibel tidak terbungkus dalam IE11

Pertimbangkan cuplikan berikut:

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

Di Chrome, teksnya sedang membungkus seperti yang diharapkan:

Tapi, di IE11, teks tidak membungkus :

Apakah ini bug yang dikenal di IE? (jika ya, sebuah pointer akan dihargai)

Apakah ada solusi yang diketahui?

Pertanyaan serupa ini tidak memiliki jawaban yang pasti dan petunjuk resmi.

Tambahkan ini ke kode Anda:

.child { width: 100%; }

Kita tahu bahwa anak tingkat blok seharusnya menempati lebar penuh orang tua.

Chrome mengerti ini.

IE11, untuk alasan apa pun, menginginkan permintaan eksplisit.

Menggunakan flex-basis: 100%atau flex: 1juga bekerja.

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

Catatan: Kadang-kadang perlu untuk memilah-milah berbagai tingkat struktur HTML untuk menentukan wadah mana yang mendapatkan width: 100%. Teks bungkus CSS tidak berfungsi di IE

Saya memiliki masalah yang sama dan intinya adalah bahwa elemen tersebut tidak menyesuaikan lebarnya dengan wadah.

Alih-alih menggunakan width:100%, konsistenlah (jangan mencampur model mengambang dan model fleksibel) dan gunakan fleksibel dengan menambahkan ini:

.child { align-self: stretch; }

Atau:

.parent { align-items: stretch; }

Ini berhasil untuk saya.

Seperti yang disarankan Tyler dalam salah satu komentar di sini, gunakan

max-width: 100%;

pada anak dapat bekerja (bekerja untuk saya). Menggunakan align-self: stretchhanya berfungsi jika Anda tidak menggunakan align-items: center(yang saya lakukan). width: 100%hanya berfungsi jika Anda tidak memiliki banyak anak di dalam flexbox yang ingin Anda tunjukkan berdampingan.

Hai bagi saya, saya harus menerapkan lebar 100% ke elemen kakek-neneknya. Bukan elemen anaknya.

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

Entah bagaimana semua solusi ini tidak berhasil untuk saya. Jelas ada bug IE di flex-direction:column.

Saya hanya membuatnya berfungsi setelah menghapus flex-direction:

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

Solusi yang diajukan tidak membantu saya dengan ".child {width: 100%;}", karena saya memiliki markup yang lebih rumit. Namun, saya menemukan solusi - hapus "align-items: center;", dan itu berfungsi untuk kasus ini juga.

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

Satu-satunya cara saya 100% secara konsisten dapat menghindari bug kolom arah-fleksibel ini adalah dengan menggunakan kueri media min-width untuk menetapkan lebar-max ke elemen child pada layar berukuran desktop.

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

Anda perlu menyetel elemen anak inline secara alami (mis. <span>Atau <a>) ke sesuatu selain inline (terutama tampilan: blokir atau tampilan: blok-inline) agar perbaikan berfungsi.

Saya tidak menemukan solusi saya di sini, mungkin seseorang akan berguna:

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

Semoga berhasil!

.grandparent{
   display: table;
}

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

Ini berhasil untuk saya.

Saya juga mengalami masalah ini.

Satu-satunya alternatif adalah menentukan lebar (atau maks-lebar) dalam elemen anak. IE 11 agak bodoh, dan saya, saya hanya menghabiskan 20 menit untuk mewujudkan solusi ini.

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

Saya memiliki masalah serupa dengan gambar yang meluap di pembungkus fleksibel.

Menambahkan salah satu flex-basis: 100%;atau flex: 1;ke anak yang kelebihan tetap diperbaiki bekerja untuk saya.

Mengapa menggunakan solusi yang rumit jika yang sederhana juga berfungsi?

.child {
  white-space: normal;
}