3

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158

1 Answers1

4

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: https://stackoverflow.com/a/34014580/3597276

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701