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

Welcome on SO :) Just in case you didn't already read it: [flexbugs](https://github.com/philipwalton/flexbugs) — FelipeAls, Nov 16 '15 at 14:49
As an addition to @FelipeAls you should read this: http://caniuse.com/#feat=flexbox . IE10 have partial support and have several bugs with that. However, you should update your IE because IE10 is a buggy software with an small use quota. Microsoft will kill IE9/10 in January 2016 — Marcos Pérez Gude, Nov 16 '15 at 14:57
Thanks for the answers. Fixed this issue this afternoon: Setting max-width: 90%; on .c-message__item. Removing min-width: 0%; from the same item. And lastly adding min-width: 0% to .c-column--center. See the codepen for the updated version: http://codepen.io/csssavvy/pen/qOgjmN — Wouter Schaap, Nov 16 '15 at 15:12
You may be able to patch code to "fix" the problem, but the bigger issue is that IE10 doesn't support the [current flexbox spec](http://www.w3.org/TR/css-flexbox-1/). IE10 is based on the previous ("tweener") version of flexbox and requires prefixes to work properly. See [**here**](https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx) and [**here**](http://stackoverflow.com/q/18019450/3597276). — Michael Benjamin, Nov 16 '15 at 16:42

score 2 · Accepted Answer · answered Nov 16 '15 at 15:16

2

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

answered Nov 16 '15 at 15:16

Wouter Schaap

59
1
4

Text not wrapping in flex IE10

1 Answers1