IE11 flexbox max-width和margin：auto; [英] IE11 flexbox max-width and margin:auto;

问题描述

我有一个简单的flexbox容器，其中包含两个项目：

I have a simple flexbox container with two items:

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

第一项具有flex-grow：1，最大宽度为200px。第二个项目的左边距为：auto;与容器对齐：

The first item has flex-grow: 1 and max-width to 200px. The second item has margin-left: auto; to be aligned right to the container:

  #container {
    display: flex;
  }

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

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

这是一个可行的演示：
http://jsfiddle.net/c81oxdg9/2/

Here is a working demo: http://jsfiddle.net/c81oxdg9/2/

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

I want the first item to be aligned left and have some max-width. And the second item to be aligned right.

在Chrome，Firefox，甚至IE10（但不是IE11）上都可以正常工作。
在IE11中，第二项从容器中推出。

Works fine in Chrome, Firefox and even IE10, but not IE11. In IE11, the second item gets pushed out of the container.

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

How to fix this for IE11? Am I missing some property?

推荐答案

我找到了一个似乎可行的答案（尽管我承认我没有对其进行测试IE 10）：我向需要对齐的元素添加了 width：100％。在IE中效果很好。

I found an answer that seems to work (though I admit I haven't tested it in IE 10): I added width: 100% to the element needing alignment. Works great in IE.

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

Probably too late to help you, but maybe someone else will need the solution.

这篇关于IE11 flexbox max-width和margin：auto;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！