Как исправить эту проблему выравнивания Flexbox из-за неподдерживаемого «гибкого роста» в IE10?

Question

Вот HTML разметка

<div class='container'> 
    <li class="options list-unstyled"> 
    <div class="rank-label"> 
     <span class="rank theme-inverse-color">1</span> 
     <span class="name">AAAAA</span> 
     <div class="move-btns"> 
     <button type="button" class="btn btn-icon btn-up"><span class="icon icon-down">Down</span></button> 
     <button type="button" class="btn btn-icon btn-down"><span class="icon icon-up">Up</span></button> 
     </div> 
    </div> 
    </li> 
</div> 

А вот тем меньше (CSS) код

.square (@size) { 
    width: @size; 
    height: @size; 
} 

.options { 
    li { 
    display: block; 
    width: 100%; 
    margin-bottom: 5px; 
    } 
} 

.container { 
    width: 50%; 
    border: 1px solid red; 
} 

.options { 
    font-size: 30px; 
} 


.text { 
    .flex-grow(1); 
    .align-items(center); 
    .justify-content(center); 
} 

.inverse-color { 
    color: blue; 
} 

.rank { 
    margin: auto; 
    padding-top: 2px; 
    display: inline-block; 
    .align-items(center); 
    .justify-content(center); 
    text-align: center; 
    background-color: rgba(0, 0, 0, 0.3); 
    border-radius: 50%; 
    .square(40px); 
    min-width: 40px; 
    margin-right: 10px; 
} 

.rank-label { 
    .display(flex); 
} 

.btn { 
    margin: 10px; 
    border: 1px solid red; 
} 

.name { 
    .display(flex); 
    .flex-grow(1); 
    .align-items(center); 
    padding-right: 30px; 
    min-height: 35px; 
} 

.move-btns { 
    .display(flex); 
    .flex-basis(auto); 
    .flex-shrink(0); 
    .flex-grow(0); 
    .justify-content(center); 
} 

Так что в таких браузерах, как Chrome, Safari и IE11, вывод выглядит точно так же, как я ожидал:

Однако в IE10 выравнивание выключено. Это каким-то образом стать:

номер и текст «ААААА» все сдвинуты в сторону правой.

Я пробовал настройку flex-grow и другие параметры, но они не имеют никакого эффекта.

Как исправить эту проблему?

Вот ссылка на код в codepen.io: http://codepen.io/kongakong/pen/bpygoV

Answer 1

Благодаря ответу @ orangeh0g, я проверил css, сгенерированный autoprefixer, в коде кода. Я считаю, что мне нужно только добавить

-ms-flex-positive: 1; 

к классу text CSS и перекосы будут исправлены.

Answer 2

Я думаю, что все, что вам нужно сделать, это включить autoprefixer в настройках CSS код пера, и она начнет работать. В основном E10 работает на старой версии синтаксиса flexbox. Поэтому ему нужны префиксы поставщика. Удачи.