Raphael Rafatpanah Raphael Rafatpanah - 4 months ago 30
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

.row
is equal to the
line-height
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">
<section>[text]</section>
<section>[text]</section>
<section>[text]</section>
</div>




Answer

It's a silly quirk in IE11.

Instead of:

flex: 1 1 0;

Use:

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

Comments