IE Flexbox对齐 - 内容中心溢出问题

Question

在IE11上查看以下演示时，存在内容显示为右对齐并被推送到屏幕之外的问题。

Codepen Demo

这里是证明内容中心的代码：

.search-results { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -webkit-justify-content: center; 
     -ms-flex-pack: center; 
      justify-content: center; 
} 

你可以看到在这张截图这里的问题：

我使用Windows上的IE browserstack 11 10来模拟。

它似乎在计算flex包装的宽度大于实际的宽度。元素，HTML或body的大小设置max-/width似乎无法解决它。我知道IE11对flexbox有一些片状支持，有没有我遗失的一个属性？供应商前缀正在被Codepen添加，因此我应该在此基础上进行介绍。

Answer 1

基于Flex的设置应该避免在IE中出现这些问题。将“.search-results__list”的flex属性更改为flex: 0 1 712px。检查下面的例子：

http://codepen.io/anon/pen/QKKpGx

IE 10-11不允许在Flex速记无单位的柔性基础值。

欲了解更多信息：https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/