IE11で複数行のフレックスボックスレイアウトを1行で表示

Question

Chrome/Firefox/Safariでは、3列のレイアウトがうまくいきます。

IE11では、非常に長い1行のテキストが表示されます。

.rowの高さは、テキストのline-heightと同じです。

この問題を説明するために簡単なjsfiddleを作成しました。

どうしてですか？

body { 
 
    background: -webkit-linear-gradient(left, #09c 0, #ad258c 28%, #eb2a31 53%, #f8ec2c 77%, #00a255 100%); 
 
    background: linear-gradient(to right, #09c 0, #ad258c 28%, #eb2a31 53%, #f8ec2c 77%, #00a255 100%); 
 
    box-sizing: border-box; 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
    color: black; 
 
    padding: 0 7px 7px 7px; 
 
} 
 
.row { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
.row section { 
 
    position: relative; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-flex: 1; 
 
    -ms-flex: 1 1 0; 
 
    flex: 1 1 0; 
 
    background: white; 
 
    margin-top: 7px; 
 
    margin-right: 7px; 
 
} 
 
.row section:last-child { 
 
    margin-right: 0; 
 
}

<div class="row"> 
 
    <section>[text]</section> 
 
    <section>[text]</section> 
 
    <section>[text]</section> 
 
</div>

Answer 1

これは、IE11で愚かな癖です。

flex: 1 1 0; 

使用：代わりの

flex: 1 1 0px; 

IE11は、単位のないflex-basisで素晴らしいプレーしません。

私はこの回答を調査したときにつまずいた：https://stackoverflow.com/a/34014580/3597276