IE11 flexbox max-width和margin: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;
  }

我希望第一个项目左对齐并具有一些最大宽度.第二项要正确对齐.

适用于Chrome,Firefox甚至IE10,但不适用于IE11.在IE11中,第二个项目被推出容器.

如何解决IE11的问题？我错过了一些房产吗？

Answer 1

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

可能为时已晚,无法帮助您,但也许其他人需要解决方案.

Answer 2

我遇到了同样的问题

display: flex;
-ms-flex: 1;
max-width: 300px;

与...结合

margin: 0 auto;

关于儿童元素.他们被赶出了容器div.

但是,我通过尝试,错误和阅读解决了这个问题

和

最后我用替换解决了它

-ms-flex: 1;

同

-ms-flex: 1 0 auto;

小心.只有在flex列内部确实需要最大宽度时,这才有效.否则它看起来像display:block.