flex:1在ie浏览器的兼容问题

场景描述：

父元素只有最大高度，没有固定高度，在display:flex且flex-direction:column时，想子元素通过自身内容撑开一个高度，达到最大高度后实现滚动。

写了如下代码：

结果在Google和Firefox浏览器下达到了想要的效果，但在ie浏览器下子flex:1无法显示。

通过查看控制台，发现ie浏览器对flex:1解析不同，Google和Firefox浏览器解析为flex:1 1 0%，ie浏览器解析为flex:1 1 0px。

那么既然这样是否可以显示设置flex:1 1 0%,结果发现还是不行；后来通过设置flex:auto后ie浏览器下可以显示内容了，但是还是有问题，otherChild的内容高度不是我们期望的样子，效果如下图：

不知道为什么在ie下会显示成这样，在这种显示情况下，当给父元素parent设置一个具体高度时，子元素otherChild的高度就正常显示了。

parent设置固定高度后ie浏览器的显示效果

总的来说，ie真的好坑啊，暂时不知道原因，只好通过其他的局部方式来达到想要的效果。

如果有大神知道原因的，求指点。