IE11 flexbox предотвращение переноса текста?

Я разрабатываю сайт, который отображает ОК в последних версиях Firefox/SeaMonkey/Chrome, но интересно, что в IE11 есть проблема с рендерингом:
http://devel.gooeysoftware.com/mozaddons/switching.php

Если вы загрузите это в IE11, элемент меню "Переход из Firefox в SeaMonkey" слева не получает его текст, завернутый в размер содержащего DIV, но вместо этого переполняется. Я не понимаю, почему это так. Это просто ошибка в IE11, или я пропустил какой-то CSS, чтобы заставить его обернуть?

UPDATE:

Похоже, они исправили кучу ошибок рендеринга IE11 flexbox в Edge.

IE11:

Край:

Ответы

Ответ 1

Насколько я могу судить, реализация IE flexbox просто сломана. Это длинный и короткий ответ на этот вопрос. Текст должен быть обертыванием, но это не так. Он работает в Firefox и Chrome.

UPDATE:

IE11 flexbox реализация действительно была нарушена. Это теперь правильно отображается в Edge.

Ответ 2

Нашел это легкое исправление в репозитории ошибок Flexbox:

/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
*    overflow.
* 2. Set `box-sizing:border-box` if
*    needed to account for padding
*    and border size.
*/

.FlexItem {
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
}

Flexbox репозиторий ошибок

Ответ 3

Я столкнулся с подобной проблемой и нашел в IE11 вам нужно использовать синтаксис:

flex: 1 1 auto;

а не:

flex: 1;

Благодаря этому Github commit: https://github.com/philipwalton/solved-by-flexbox/pull/8/files

Ответ 4

Мне удалось получить текст для надлежащего переноса в IE10 и 11, явно установив width или max-width в элементе display: flex, а дочерний элемент должен иметь заверенный текст.

.flex-fix {
  display: flex;
  flex-wrap: wrap;
}

.flex-fix,
.flex-fix > * {
  max-width: 100%;
}

Здесь демо версия Codepen.

Ответ 5

Помогает ли это перо? Здесь то, что я нашел, дает мне обходное решение для ie11.

http://codepen.io/dukebranding/pen/vLQxGy

p {
    /* Wrap the child text in a block tag, add the following styles */
    display: flex;
    width: 100%;
}

Ответ 6

Я решил эту проблему, добавив overflow: hidden в элемент flex.

Но это также предотвращает переполнение всех дочерних элементов, поэтому это может быть плохое решение, если вы используете всплывающие подсказки или popovers внутри вашего элемента flex.

Ответ 7

Немного поздно для вечеринки, но настройка white-space: normal сделала трюк для меня.

Ответ 8

Благодаря pyko добавьте следующий класс к родительскому элементу чего-либо, не выполняющего обычные правила переполнения flex:

.ie-dont-overflow {
  -ms-overflow-x: hidden;
  -ms-overflow-y: hidden;
}

Я понятия не имею, почему это работает. IE отстой...

Ответ 9

Просто удалите

align-items: flex-start

для #ContentNav. Нет смысла использовать его для столбца flexbox.