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 10上使用browserstack IE 11来模拟。

似乎计算的是柔性包装纸的宽度大于实际宽度。元素，HTML或正文上没有设置max- / width的数量似乎可以修复它。我知道IE11对flexbox有一些不稳定的支持，有没有我失踪的属性？ Codepen正在添加供应商前缀，因此我应该在此基础上加以覆盖。

Answer 1

应设置Flex-basis以避免IE中的这些问题。将“.search-results__list”的flex属性更改为flex: 0 1 712px。请查看以下示例：

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

  

IE 10-11不允许弹性简写中的无单位弹性基础值。

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