IE 11 下overflow-x: auto无效，没有出现滚动条

Question

代码如下

<div style="width: 1200px;height: 313px;overflow: hidden;position: relative;">
    <ul>
        <li></li>
        ...
        <li></li>
    </ul>
</div>

样式：

ul{
    width: 1200px;
    display: flex;
    display: -webkit-box;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    height: 330px;
    position: relative;
}
li{
    width:200px;
    height:240px;
}

我是给父元素ul设置了display: flex 和 overflow-x: auto
在谷歌浏览器里正常，横向有滚动，IE下无效，所有li挤压在了一起
在网上搜了一些答案，给父元素设置position: relative 或者是 设置固定height都不行
请问在IE中如何解决这个问题，实现横向超出部分滚动？