IE Flexbox justify-content center 溢出问题

Posted 2023-03-05

【中文标题】IE Flexbox justify-content center 溢出问题

【英文标题】：IE Flexbox justify-content center overflow issue

【发布时间】：2017-01-26 18:15:17

【问题描述】：

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

似乎计算的 flex 包装器的宽度大于实际值。在元素、html 或正文上设置最大/宽度似乎无法修复它。我知道 IE11 对 flexbox 有一些不稳定的支持，是否有我缺少的属性？ Codepen 正在添加供应商前缀，因此我应该在此基础上进行介绍。

【参考方案1】：

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

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

IE 10-11 不允许在 flex 速记中使用无单位的 flex-basis 值。

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

【讨论】：

谢谢@cewn！我记得 IE 需要 flex-basis，但是忘记在这个项目中实现。这正是修复它的原因！感谢帮助:)