html - 多列 flexbox 布局在 IE11 中呈现为单行

Question

在 Chrome/Firefox/Safari 中，我得到了一个漂亮的三列布局。

在 IE11 中，我得到一行很长的文本。

.row的高度等于文本的line-height。

我创建了一个简单的 jsfiddle来说明这个问题。

为什么会这样？

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

这是 IE11 中的一个愚蠢的怪癖。

代替:

flex: 1 1 0;

使用:

flex: 1 1 0px;

IE11 不能很好地处理无单位的 flex-basis。

我在研究这个答案时偶然发现了这个:https://stackoverflow.com/a/34014580/3597276