Left and Right Word-Break in IE11

Question

I would like get this behavior in Internet Explorer 11
In Chrome and Firefox the words wrap to left and right when has a flexbox center alignment. In IE11 the wrap text is only to the right. Check the pictures to see the diference in IE11. ¿ How can get the Chrome and Firefox behavior in IE11 ? Thanks !!

div {
  width: 150px; 
  border: 1px solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

<h1>The word-wrap Property</h1>

<h2>word-wrap: normal (default):</h2>
<div> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

See IE11 Preview

See Chrome and Firefox preview

Answer 1

This is a common flexbug in IE.

You could see that flex is partially supported in IE from:https://caniuse.com/#feat=flexbox

You could also find common flexbugs and related workarounds from: https://github.com/philipwalton/flexbugs

I modified part of your code and maybe you could refer to:

CSS.

    .outer {
        width: 150px;
        border: 1px solid #000000;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .inner {
        box-sizing: border-box; 
        max-width: 100%;
    }

HTML.

<h1>The word-wrap Property</h1>
<h2>word-wrap: normal (default):</h2>
<div class="outer">
    <div class="inner">
        This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
    </div>
</div>