Raphael Rafatpanah Raphael Rafatpanah - 3 months ago 18
HTML Question

Multi-column flexbox layout rendering as single line in IE11

In Chrome/Firefox/Safari, I get a nice three-column layout.

In IE11, I get one very long line of text.

The height of

is equal to the
of the text.

I've created a simple jsfiddle to illustrate the issue.

Why does this happen?

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">


It's a silly quirk in IE11.

Instead of:

flex: 1 1 0;


flex: 1 1 0px;

IE11 doesn't play nice with a unitless flex-basis.

I stumbled upon this when researching this answer: http://stackoverflow.com/a/34014580/3597276