Flexbox элемент укладки поверх друг друга IE 10

Question

Так я это усеченную codepen:

http://codepen.io/anon/pen/xGmeEw

<div class="input-group"> 
    <div class="input-group-item"> 
    <div class="causes-error"> 
     <label> 
     <input type="checkbox" /> 
     <span>I want to receive weekly newsletters</span> 
     </label> 
    </div> 
    </div> 
    <div class="input-group-item"> 
    <div class="causes-error"> 
     <label > 
     <input type="checkbox" /> 
     <span>I agree to terms and conditions</span> 
     </label> 
    </div> 
    </div> 
</div> 

<div class="input-group m-align-start"> 
    <div class="input-group-item"> 
    <div class="causes-error"> 
     <label> 
     <input type="checkbox" /> 
     <span>I want to receive weekly newsletters</span> 
     </label> 
    </div> 
    </div> 
    <div class="input-group-item"> 
    <div class="causes-error"> 
     <label > 
     <input type="checkbox" /> 
     <span>I agree to terms and conditions</span> 
     </label> 
    </div> 
    </div> 
</div> 

@import "bourbon"; 

* { 
    box-sizing: border-box; 
} 

@mixin flexbox-value-width($width) { 
    @include flex(0 0 $width); 

    max-width: $width; 
} 

.input-group { 
    @include display(flex); 
    @include flex-wrap(wrap); 
    @include justify-content(space-between); 
} 

.input-group-item { 
    @include flexbox-value-width(100%); 
    @include flex(1); 
} 

.input-group.m-align-start { 
    @include justify-content(flex-start); 
} 

.input-group.m-align-start .input-group-item { 
    @include flex(0 1 auto); 
} 

.causes-error { 
    @include display(flex); 
    @include align-items(center); 
} 

label { 
    @include display(flex); 
    @include align-items(center); 
    @include flex(1 0 0px); 
} 

Верхняя группа флажков делают штраф в Chrome, FireFox и IE 10, однако вторая группа флажков не отображается должным образом в IE 10 (Chrome и FireFox делают их прекрасными). Проблема в IE 10 заключается в том, что они сложены друг на друга, и я не уверен, почему. Я сузил вопрос до раздела с classcauses-error. Если я передам css для этого элемента, IE 10 сделает его прекрасным (с ними рядом друг с другом, как и другие браузеры с этим css), однако мне нужно, чтобы css в полной версии этого кода (что слишком много чтобы опубликовать здесь, что у меня есть эта урезанная версия).

Кто-нибудь знает, почему IE 10 будет испортить это?

Answer 1

IE10 only gives partial support to flex с требованием префикса -ms- и следует за старшим синтаксисом 2012 года.