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

Ответ 1

Добавьте это в свой код:

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

Ответ 2

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

Вместо width:100%, быть последовательным (не смешивайте плавающую модель и модель flex) и используйте flex, добавив следующее:

.child { align-self: stretch; }

Или:

.parent { align-items: stretch; }

Это сработало для меня.

Ответ 3

Как предложил Тайлер в одном из комментариев, используя

max-width: 100%;

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

Ответ 4

Привет, мне пришлось применить ширину 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;
}

Ответ 5

Предложенные решения не помогли мне с ".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>

Ответ 6

flex: 1;

У меня была та же проблема, и я исправил ее, добавив это свойство в родительский элемент. Добавление width: 100% не работало в моем случае, так как у меня были вложенные дети.

Кроме того, грязным хаком будет добавление overflow: hidden для родительского элемента. (не буду рекомендовать)

Ответ 7

Моя рекомендация, когда для flex-direction установлено значение column, состоит в том, чтобы использовать медиазапрос минимальной ширины для назначения максимальной ширины на экранах размером с рабочий стол.

.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), чтобы исправление работало.

Ответ 8

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

.child {
  white-space: normal;
}