IE 11 使用弹性宽度时忽略最小宽度答案

【问题标题】：IE 11 ignores min-width when using flex widthIE 11 使用弹性宽度时忽略最小宽度
【发布时间】：2016-07-28 18:20:44
【问题描述】：

我想知道是否有人可以帮助解决这个问题。我花了很多时间在上面，但我完全没有想法，我尝试了 Google 结果中的各种建议，各种 flex 增长和收缩组合，但无法让它发挥作用。

演示： https://embed.plnkr.co/dIPh53W4DBkmTB51DCHp/（使用 IE 11 打开）

编辑代码： https://plnkr.co/edit/dIPh53W4DBkmTB51DCHp?p=preview

在这种情况下，在平板电脑视图中<ul> flex 宽度应该是 90%，但在桌面视图中<ul> flex 宽度应该只有 55%。但是，我们不希望桌面视图中的<ul> 比平板视图中的短，因此我们在<ul> 上为桌面视图设置了min-width: 864px。因此，如果您在 950px 和 970px 之间调整屏幕大小，<ul> 不应再突然缩小。

这似乎在所有 Chrome、Firefox、Safari 和 IE10 中都能正常工作。

但在 IE11 中，元素的宽度错误，无法按预期居中。我认为这是因为在 960 像素的浏览器尺寸下，<ul> 元素上的 max-width: 528px 是 55%，但它也有 min-width: 864px。出于某种原因，IE11 将其呈现为位于左侧（而不是中心），宽度为 528 像素。所以 IE11 似乎忽略了 min-width 属性，它不像其他浏览器那样处理它。

代码示例：

index.html：

<div class="progress-bar">
  <ul>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
  </ul>
</div>

style.css：

div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul {
  display: flex;
  flex: 1 1 90%;
  max-width: 90%;

  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;

  margin: 0;
  padding: 12px 0;
  list-style-type: none;
  background: #f7f7f7;
}

@media (min-width: 960px) {
  ul {
    min-width: 864px !important;
    flex-basis: 55%;
    max-width: 55%;
  }
}

IE 10 在这种情况下实际上可以正常工作，因此 IE 11 版本似乎可能破坏了一些已经在工作的东西。

有什么办法可以解决这个问题吗？

【问题讨论】：

@Michael_B 在 Chrome 和 IE 10 中似乎可以工作（使用 flex: 1 0 864px），但在 IE 11 中存在对齐问题。在 IE 11 中，看起来 <ul> 元素的宽度终于正确了，但元素不再居中：embed.plnkr.co/iCMWGUeoUp2b2jPPiFHg

标签： css internet-explorer flexbox internet-explorer-11

【解决方案1】：

由于在 IE11 中似乎无法解决此问题，我添加了一个临时媒体查询来更改特定维度的行为。

如果我们想要 90% 的宽度到 959px 的屏幕尺寸，然后在 960px 的屏幕尺寸之后再增加 55% -- 我计算确定我们希望 <ul> 元素的宽度为 864px (960px x 90%)当屏幕介于 960px 和 1570px (864px / 55%) 之间时。所以对于这个尺寸范围，我强制宽度和最大宽度为 864 像素。

然后对于大于 1571px 的屏幕，flexbox 55% 继续再次应用。

使用这种方法，我可以完全忽略 min-width。

@media (min-width: 960px) and (max-width: 1570px) {
  ul {    
    flex-basis: 100%;
    max-width: 864px;
    width: 864px;
  }
}

【讨论】：