Текст в гибком контейнере не переносится в IE11


176

Рассмотрим следующий фрагмент:

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

Есть ли известный обходной путь?


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



1
Проблема исчезает, когда я удаляю align-items: centerиз родительского элемента. Похоже, именно это и вызывает его
Натан Перье

Ответы:


281

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

.child { width: 100%; }

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

Chrome это понимает.

IE11 по какой-то причине хочет явный запрос.

Использование flex-basis: 100%или flex: 1также работает.

Примечание. Иногда бывает необходимо отсортировать различные уровни структуры HTML, чтобы точно определить, какой контейнер получает width: 100%. CSS перенос текста не работает в IE


13
Мне пришлось добавить ширину: 100%; к родителю. Эта ошибка, кажется, имеет различные исправления в зависимости от контекста. Вздох IE!
Деннис Джонсен

8
Скорее используйте «max-width: 100%» для .child.
Тайлер

2
Я создаю таблицу с использованием flex (каждая строка является flex, и у ее детей есть:. flex: 1 1 50%; display: flex; align-items: center;Не удивительно, что IE не работает, когда перенос текста в ячейки выполняется в длинных текстах. Настройка width:100%работает, но настройка min-width: 100%не выполняется! Должна, но не работает т (как и все IE), так что я попробовал max-width: 99%, и удивительно, что он делает работу , я думаю , что с помощью. width:100%может быть лучше?
kumarharsh

1
Я должен был удалить flex-direction: columnна родителя для этого, чтобы работать.
Дман

1
Эта проблема кажется исключительной для гибких столбцов. Не бывает с гибкими рядами.
Дражен Бьеловук

41

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

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

.child { align-self: stretch; }

Или:

.parent { align-items: stretch; }

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


2
Да, этот ответ тоже имеет смысл (и, вероятно, более правильный, чем ширина). В одном из моих проектов установка ширины: 100% невозможна, и это решение хорошо работает.
kumarharsh

11

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

max-width: 100%;

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


Максимальная ширина работала для меня, когда применялась к тому же контейнеру, на котором было установлено align-items: flex-start.
Herms

7

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

У меня была "ширина: авто;" на дедушку Переход на 100% исправил это для меня.
jensanity5000

2

Почему-то все эти решения не сработали для меня. Там явно ошибка IE flex-direction:column.

У меня это работает только после удаления flex-direction:

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

0

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


Вам не нужно удалять align-items: center. См stackoverflow.com/a/39365207/630170
kumarharsh

0

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


0

Я не нашел здесь своего решения, может быть кому-то пригодится

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

Удачи!



0

Я тоже столкнулся с этой проблемой.

Единственная альтернатива - определить ширину (или максимальную ширину) в дочерних элементах. 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>

-1

У меня была похожая проблема с переполнением изображений в flex-оболочке.

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


Это решение дано уже много лет назад, и нам нужен только один, поэтому избегайте размещения дублирующих ответов.
Асон

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.