html - IE11 flexbox 最大宽度和边距 :auto;

Question

我有一个包含两个元素的简单 flexbox 容器:

<div id='container'>
    <div id='first-item'>first item</div>
    <div id='second-item'>second item</div>
</div>

第一项的 flex-grow: 1 和 max-width 为 200px。第二项有 margin-left: auto;与容器对齐:

  #container {
    display: flex;
  }

  #first-item {
    max-width: 200px;
    flex: 1;
  }

  #second-item {
    margin-left: auto;
  }

这是一个工作演示: http://jsfiddle.net/c81oxdg9/2/

我希望第一个元素左对齐并有一些最大宽度。第二项要右对齐。

在 Chrome、Firefox 甚至 IE10 中工作正常，但在 IE11 中不工作。在 IE11 中，第二个元素被推出容器。

如何为 IE11 修复此问题？我是否缺少某些属性？

Answer 1

我找到了一个似乎有效的答案(虽然我承认我没有在 IE 10 中测试过它):我将 width: 100% 添加到需要对齐的元素。在 IE 中运行良好。

可能为时已晚，无法为您提供帮助，但也许其他人会需要解决方案。