Текст в гибком контейнере не переносится в 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%работает только в том случае, если у вас нет нескольких дочерних элементов внутри вашего flexbox, которые вы хотите показать рядом.

Привет, мне пришлось применить ширину 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% смог последовательно избежать этой ошибки в столбце flex-direction, - это использование медиазапроса минимальной ширины для назначения максимальной ширины дочернему элементу на экранах размером с рабочий стол.

.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-оболочке.

Добавление либо flex-basis: 100%;или flex: 1;в переполненном ребенок фиксированной работал для меня.

Зачем использовать сложное решение, если простое тоже работает?

.child {
  white-space: normal;
}