Текст не оборачивать в гибком IE10

Question

.c-container { 
 
    background-color: coral; 
 
    display: flex; 
 
    margin: 0 auto; 
 
    width: 90%; 
 
} 
 

 
.c-column { 
 
    position: relative; 
 
} 
 
.c-column--left, .c-column--right { 
 
    flex: 0 0 auto; 
 
    width: 344px; 
 
    max-width: 344px; 
 
    min-width: 344px; 
 
} 
 
.c-column--left { 
 
    order: -1; 
 
} 
 
.c-column--center { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: #ff5213; 
 
} 
 

 
.c-topic__header, .c-topic__footer { 
 
    padding: 24px; 
 
    background-color: #e93f00; 
 
} 
 
.c-topic__body { 
 
    position: relative; 
 
} 
 

 
.c-message { 
 
    padding: 24px; 
 
    position: relative; 
 
} 
 
.c-message__list { 
 
    padding: 0; 
 
    position: relative; 
 
    display: flex; 
 
    flex-direction: column; 
 
    list-style: none; 
 
} 
 
.c-message__item { 
 
    background-color: skyblue; 
 
    border-radius: 3px; 
 
    border-bottom: 2px solid rgba(0, 0, 0, 0.2); 
 
    padding: 24px; 
 
    min-width: 0%; 
 
    margin-bottom: 5px; 
 
    flex: 1 1 auto; 
 
} 
 
.c-message__item--right { 
 
    align-self: flex-end; 
 
    margin-left: 10%; 
 
} 
 
.c-message__item--left { 
 
    align-self: flex-start; 
 
    margin-right: 10%; 
 
} 
 

 
.o-box { 
 
    padding: 24px; 
 
} 
 

 
.u-relative { 
 
    position: relative; 
 
}

<div class='c-container'> 
 
    <div class='c-column c-column--center'> 
 
    <div class='c-topic__header'> 
 
     Header: flex-child 
 
    </div> 
 
    <div class='c-topic__body'> 
 
     <div class='c-message'> 
 
      <ul class='c-message__list'> 
 
      <li class='c-message__item c-message__item--right'> 
 
       Hi, I'm a message placed on the right side and I'm quite wide 
 
      </li> 
 
      <li class='c-message__item c-message__item--left'> 
 
       How swell. I'm on the left and a bit shorter. 
 
      </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div class='c-topic__footer'> 
 
     Footer: flex-child 
 
    </div> 
 
    </div> 
 
    <div class='c-column c-column--left'> 
 
    <div class='o-box u-relative'> 
 
     <span>Left column: 344px</span> 
 
    </div> 
 
    </div> 
 
    <div class='c-column c-column--right'> 
 
    <div class='o-box u-relative'> 
 
    <span>Right Column: 344px</span> 
 
    </div> 
 
    </div> 
 
</div>

Недавно я работал над реализацией Flexbox в интерфейс WebAPP. Одна страница состоит из трех столбцов, причем левый и правый столбцы имеют фиксированную ширину, а центр - гибкий.

Центральная колонка в свою очередь состоит из 3 изгибаемых детей. Фиксированный верхний и нижний колонтитулы высоты с гибким центром. Этот центр столбцов (следовательно, CC) получает вертикальную полосу прокрутки, если содержимое, которое оно содержит, переполняется.

Внутри CC есть обертка с прокладкой. Это происходит потому, что javascript не справляется с прокруткой, причем прокладка находится на самом элементе CC.

Проблема в том, что в IE10 текст внутри синих блоков не обертывается, когда область просмотра становится меньше. У Safari, Chrome и Firefox все это не так. Кто-нибудь знает, как заставить IE10 вести себя как остальные?

Пример проблемы можно найти здесь: http://codepen.io/csssavvy/pen/qOgjmN

---

Tl; Др. Переполнение текста IE10 flexbox не работает. Нужна помощь. Пример кода: http://codepen.io/csssavvy/pen/qOgjmN

Answer 1

Спасибо за ответы. Исправлена ​​эта проблема сегодня днем:

Изменения на .c-message__item: Добавить max-width: 90%; Удалить min-width: 0%;.

Изменения на .c колонке - центр: Добавить min-width: 0%;

Смотрите codepen для обновленной версии: codepen.io/csssavvy/pen/qOgjmN