В IE не правильно отображается текст, как исправить?

Question

[ma4t]

Привет. На флексах сверстан родитель с двумя детьми внутри на флексах. У ребенка main внутри текст в теге span , в IE 10 это текст не переносится на строчки, а пишется все в одну и появляется горизонт. скролл. Как исправить? писал word-break и все остальные аналоги не помогает, если скрыть скролл, то просто текст тогда весь не виден, но остается также в строчку.

Я так понял в IE 10 текст на границы не обращает внимания почему-то, и ширина в % высчитывается как-то не так

.genius-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 10px;
color: white;
}

.genius-block__main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 210.98px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.genius-block__main {
width: 67.374%;
padding: 30px 46px 53px 25px;
background-color: #A2A9B7;
line-height: 26px;
font-size: 18px;
text-align: center;
overflow-y: scroll;
word-wrap: break-word;
}

Answer 1

[ma4t]

Оказалось для корректной работы span нужно было задать inline-block и width:100%;