IE11 flexbox, предотвращающий перенос текста? [закрыто]

Я занимаюсь разработкой сайта, который отображает «ОК» в последних версиях Firefox / SeaMonkey / Chrome, но, что интересно, в IE11 есть проблема рендеринга:

http://devel.gooeysoftware.com/mozaddons/switching.php

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

ОБНОВИТЬ:

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

IE11:

Край:

Ответы на вопрос(10)

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

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

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

Вот'сCodepen демо.

что с IE11 нужно использовать синтаксис:

flex: 1 1 auto;

скорее, чем:

flex: 1;

Благодаря этому Github совершают:https://github.com/philipwalton/solved-by-flexbox/pull/8/filesI»

white-space: normal сделал трюк для меня.

где текст внутри гибкого элемента не былt, и обнаружил, что в нашем конкретном случае это было исправлено, просто заключив текст внутри элемента flex в<span></span> элемент, так что текстовый узел не является прямым потомком элемента flex. Это позволило переносить текст в IE11, как и в других браузерах.

Я подозреваю, что это работает по аналогичным причинамisralCDuke»ответ на этот вопрос, но кажется немного проще, так как он не требует дополнительных правил CSS.

То, что я нашел, дает мне обходной путь для ie11.

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

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

Нашел это простое исправление в репозитории ошибок 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

Это длинный и короткий ответ на этот вопрос. Текст должен быть упакован, но это не такт. Это делает в Firefox и Chrome.

ОБНОВИТЬ:

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

что не ведет себя flex 'Обычные правила переполнения:

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

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

overflow: hidden к гибкому предмету.

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

Просто удали

align-items: flex-start

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

ВАШ ОТВЕТ НА ВОПРОС