Текст у контейнері flex не вкладається в 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%, бути послідовним (не змішувати з плаваючою моделі і гнучку модель) і використовувати прогинається, додавши наступне:

.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>) на щось інше, ніж вбудоване (в основному дисплей: блок або дисплей: вбудований блок), щоб виправлення працювало.

Я не знайшов тут свого рішення, можливо, хтось стане у нагоді:

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