Search code examples
cssinternet-explorer-10flexbox

Word-break / word-wrap inside display flex cell IE10

Having problem word-breaking inside a cell which has display flex in IE10. It behaivs correctly on chrome, compare the fiddle in chrome to see expected behaviour.

In the example, the first cell in the table should word break and not flow into the next cell.

I have tried multiple word-breaks and word-wraps, (none of which are needed in chrome/mozilla) but they dont work in IE.

Any help appreciated.

jsFiddle

HTML: 

<div class="container">
    <div class="table">
        <div class="table-row">
            <div class="table-row-cell">Long string input that we want to word break and not overflow into other cell</div>
            <div class="table-row-cell">short</div>
            <div class="table-row-cell">short</div>
            <div class="table-row-cell">short</div>
        </div>
        <div class="table-row">
            <div class="table-row-cell">normal length</div>
            <div class="table-row-cell">short</div>
            <div class="table-row-cell">short</div>
            <div class="table-row-cell">short</div>
        </div>
    </div>
</div>

CSS:

html, body { padding: 0; margin: 0; }
.container {
    width: 400px;
}
.table {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-direction: column;
    -ms-flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;  
}
.table-row {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-direction: row;
    -ms-flex-wrap: nowrap;
}
.table-row-cell {
    display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  -webkit-flex-basis: 0;
  -moz-flex-basis: 0;
  flex-basis: 0;
  -ms-flex-preferred-size: 0;
  /*  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  -ms-word-wrap: break-word;
  -ms-overflow-wrap: break-word;
  -ms-word-break: break-all;
  -ms-word-break: break-word;*/
  padding: 0.5em;
}
Solution

  • This is actually a known bug with flexbox in IE 10 & 11 (https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items).

    The only workaround I have been able to come up with that may help solve your problem is to wrap the overflowing content in a block level element, and then set a max width on that element:

    <div class="table-row-cell">
  <p style="display: block; max-width: 100px;">
    Long string input that we want to word break and not overflow into other cell
  </p>
</div>

    The result of this solution:

    IE acting up