Левый и правый разрыв слов в IE11

Question

Я хотел бы получить такое поведение в Internet Explorer 11
В Chrome и Firefox слова переносятся влево и вправо, когда имеет выравнивание по центру flexbox.В IE11 текст переноса находится только справа.Проверьте изображения, чтобы увидеть разницу в IE11. ¿Как получить поведение Chrome и Firefox в IE11? Спасибо !!

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>

См. Предварительный просмотр IE11

См. Предварительный просмотр Chrome и Firefox

Answer 1

Для IE11 решение: использовать flex-direction: column; Пример кода

Answer 2

Это обычный flexbug в IE.

Вы можете видеть, что flex частично поддерживается в IE из: https://caniuse.com/#feat=flexbox

Вы также можете найти общие flexbugs и связанные с ними обходные пути из: https://github.com/philipwalton/flexbugs

Я изменил часть вашего кода, и, возможно, вы могли бы обратиться к:

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>