Mehrspaltiges Flexbox-Layout-Rendering als einzelne Zeile in IE11

Question

In Chrome/Firefox/Safari bekomme ich ein schönes dreispaltiges Layout.

In IE11 bekomme ich eine sehr lange Textzeile. Die Höhe von .row entspricht der line-height des Textes.

Ich habe eine einfache jsfiddle erstellt, um das Problem zu veranschaulichen.

Warum passiert das?

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

Es in IE11 eine dumme Marotte ist.

Statt:

flex: 1 1 0; 

Verwendung:

flex: 1 1 0px; 

IE11 nicht schön spielen mit einem einheitslose flex-basis.

Ich stolperte darüber bei der Untersuchung dieser Antwort: https://stackoverflow.com/a/34014580/3597276