Text not wrapping in flex 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>

Recently I've been working on implementing flexbox into a webapp interface. One page consists of three columns, with the left and right column having a fixed width, and the center being flexible.

The center column in turn consists of 3 flexed children. A fixed height header and footer, with a flexible center. This column-center (hence CC) gets a vertical scrollbar if the content it holds overflows.

Inside the CC, there is a wrapper with a padding. This is there because javascript doesn't handle the scrolling well with the padding being on the CC item itself.

The problem is that in IE10 the text inside the blue blocks doesn't wrap when the viewport gets smaller. Safari, Chrome and Firefox all don't have this issue. Does anyone know how to get IE10 to behave like the rest?

An example of the problem can be found here: http://codepen.io/csssavvy/pen/qOgjmN

---

Tl;dr. IE10 flexbox text overflow not working. Need help. Code example: http://codepen.io/csssavvy/pen/qOgjmN

Answer 1

Thanks for the answers. Fixed this issue this afternoon:

Changes on .c-message__item: Add max-width: 90%; Remove min-width: 0%;.

Changes on .c-column--center: Add min-width: 0%;

See the codepen for the updated version: codepen.io/csssavvy/pen/qOgjmN