Raphael Rafatpanah Raphael Rafatpanah - 4 months ago 34
CSS Question

How to get this flexbox layout to work on IE11

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

HTML:

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


CSS (autoprefixed):

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;
}


In Chrome/Firefox/Safari, I get a nice three column layout. In IE11, I get one very long line of text. The height of
.row
is equal to the line-height of the text.

Why does this happen?

Answer

It's a silly quirk in IE11.

Instead of:

flex: 1 1 0;

Use:

flex: 1 1 0px;

Stumbled upon this when writing this answer: http://stackoverflow.com/a/34014580/3597276