Текст в контейнере flex не переносится в IE11
Рассмотрим следующий fragment:
.parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry
В Chrome текст обертывается, как ожидалось:
- 'WebForm_DoPostBackWithOptions' не определен в IE11 Preview
- Является ли IE 11 последним и доступен для Windows 8 Pro x64?
- Как написать CSS-хак для IE 11?
- Запрос CORS с IE11
- Мета-элемент IE11 Перерывы SVG
Но в IE11 текст не обертывается :
Является ли это известной ошибкой в IE? (если да, то указатель будет оценен)
Известно ли обходное решение?
Этот подобный вопрос не имеет определенного ответа и официального указателя.
- IE11 предотвращает запуск ActiveX
- Где «Режим браузера» ушел из средств разработки Internet Explorer 11?
- Добавить Google в качестве поставщика поиска по умолчанию для Windows 8.1 IE 11
- Как вернуть «Режим браузера» в IE11?
- Почему Internet Explorer 11 не соблюдает условные комментарии даже при эмуляции режима документа Internet Explorer 8?
- font awesome icon не отображается в IE 11, но отображается в других браузерах
- IE11 - вкладки запуска - восстановление последней сессии не работает
- Internet Explorer 9, 10 и 11 Конструктор событий не работает
Добавьте это в свой код:
.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 */ }
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry
У меня была такая же проблема, и дело в том, что элемент не адаптировал свою ширину к контейнеру.
Вместо использования width:100% , будьте последовательны (не смешивайте плавающую модель и модель flex) и используйте flex, добавив следующее:
.child { align-self: stretch; }
Или:
.parent { align-items: stretch; }
Это сработало для меня.
Как Тайлер предложил в одном из комментариев здесь, используя
max-width: 100%;
на ребенка может работать (работал на меня). Использование align-self: stretch работает только в том случае, если вы не используете align-items: center (что я и сделал). width: 100% работает только в том случае, если у вас нет нескольких дочерних элементов внутри вашего flexbox, которые вы хотите показать бок о бок.
Привет, мне пришлось применить ширину 100% к своему элементу grandparent. Не его дочерний элемент (ы).
.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; }
Зачем использовать сложное решение, если работает простой?
.child { white-space: normal; }