IE Flexbox justify-content 中心溢出问题

Question

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

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

.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 进行模拟。

它计算的 flex wrapper 宽度似乎比实际宽度大。在元素、HTML 或 body 上设置 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 don’t allow unitless flex-basis values in the flex shorthand.

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

IE Flexbox justify-content 中心溢出问题

IE Flexbox justify-content center overflow issue

html

css

flexbox

internet-explorer-11