IE 11 不正确显示 flex-direction: column

【问题标题】：IE 11 incorrect display flex-direction: columnIE 11 不正确显示 flex-direction: column
【发布时间】：2017-09-21 13:34:55
【问题描述】：

我想要：

.parent 具有基于内容的高度，但具有最大高度
孩子的身高取决于内容
.second 具有基于内容的高度，但相对于 .parent 最大高度

但是 IE 确实有问题。其他浏览器运行良好。

HTML：

<div class=buggedFix>
 <div class=parent>
   <div class=first>...</div>
   <div class=second><div class=big>...</div></div>
   <div class=third>...</div>
 </div>
</div>

CSS：

/*.buggedFix{display:flex;}*/
.parent{display:flex;flex-direction: column;width:250px;max-height:200px;}
.first{background:pink;flex: 0 1 auto;}
.third{background:yellow;flex: 0 1 auto;}
.second{background:brown;flex: 1 1 auto;overflow: auto}
.big{background:red;height:600px;margin:10px}

坏 1：https://jsfiddle.net/fpnjwp0j/3/
坏2：https://jsfiddle.net/j53ds1mb/3/

【问题讨论】：

标签： html css internet-explorer flexbox

【解决方案1】：

将first 和third 规则的flex-shrink 值更改为0

Updated fiddle

堆栈sn-p

.buggedFix {
  display: flex;
}

.parent {
  display: flex;
  flex-direction: column;
  width: 250px;
  max-height: 200px;
}

.first {
  background: pink;
  flex: 0 0 auto;               /*  changed  */
}

.third {
  background: yellow;
  flex: 0 0 auto;               /*  changed  */
}

.second {
  background: brown;
  flex: 1 1 auto;
  overflow: auto
}

.big {
  background: red;
  height: 600px;
  margin: 10px
}

<div class=buggedFix>
  <div class=parent>
    <div class=first>This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. This is OK. </div>
    <div class=second>
      <div class=big>parent max-height is ignored!</div>
    </div>
    <div class=third>This is OK. This is OK. This is OK. This is OK.</div>
  </div>
</div>

【讨论】：