Ошибка Microsoft Edge с использованием переносов и flexbox

Question

Этот код показывает два контейнера div. На div с идентификатором a является display: flex; задавать. На обоих у нас есть переносы, активированные с помощью -ms-hyphens: auto;, Но в IE или Edge перенос работает только на div без подключенной flexbox. Как и ожидалось, он хорошо работает в Chrome и Firefox.

div {
  max-width: 100px;
  background: red;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-bottom: 10px;
}
#a {
  display: flex;
}

<article>
  <div id="a" lang="en">
    Incomprehensibilities 
  </div>

  <div id="b" lang="en">
    Incomprehensibilities 
  </div>
</article>

https://codepen.io/anon/pen/jmGxJZ

У кого-нибудь есть решение?

Answer 1

Я наконец нашел ответ.

Согласно https://css-tricks.com/almanac/properties/h/hyphenate/

Свойство дефисов управляет переносом текста в элементах уровня блока.

Они говорят прямо block level elements, Поэтому я решил не использовать flexbox, потому что на самом деле это не элемент блочного уровня, спасибо @LGSon.

Поэтому для центрирования и переноса текста я использовал подход https://css-tricks.com/centering-css-complete-guide/ для вертикального центрирования элемента уровня блока. Кроме того, согласно http://caniuse.com/, Chrome в Windows в любом случае не поддерживает переносы. Так что я использовал word-break: break-all; только для Chrome с помощью взлома медиа-запроса отсюда /questions/26040953/kak-primenit-opredelennyie-pravila-css-tolko-k-chrome/26040963#26040963. Наконец, это работает для Chrome, FF и Safari на MAC OSX. Также для Edge и IE11 в Windows.

Вы можете увидеть мой результат на https://codepen.io/bierik/pen/mmBjqQ