Текст в контейнере flex не переносится в IE11

Question

Текст в контейнере 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? (если да, то указатель будет оценен)

есть ли обходной путь?

этот похож вопрос не имеет определенного ответа и официального указателя.

933 5

css css3 internet-explorer-11 internet-explorer flexbox

5 ответов:

Comments

Ничего не найдено.

Michael_B · Accepted Answer · 2017-05-23 14:54:41

добавьте это в ваш код:
.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 wrap text не работает в IE

Andry · Accepted Answer · 2017-10-18 19:07:29

у меня была та же проблема, и дело в том, что элемент не адаптировал свою ширину к контейнеру.

вместо width:100%,будьте последовательны (Не смешивайте плавающую модель и модель flex) и используйте flex, добавив Это:
.child { align-self: stretch; }
или:
.parent { align-items: stretch; }
это работает для меня.

dude · Accepted Answer · 2018-03-09 10:08:20

как Тайлер предложил в одном из комментариев здесь, используя
max-width: 100%;
на ребенка может работать (у меня работал). Используя align-self: stretch работает только если вы не используете align-items: center (что я и сделал). width: 100% работает только если у вас нет нескольких детей внутри вашего flexbox, которые вы хотите показать бок о бок.

Angus Grant · Accepted Answer · 2016-05-10 15:18:07

Привет для меня я должен был применить 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;
 }

Sergey Aldoukhov · Accepted Answer · 2018-08-05 19:43:45

зачем использовать сложное решение, если простое тоже работает?
.child {
  white-space: normal;
}