IE11 flexbox 最大宽度和边距：自动；

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 中运行良好。

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

Answer 2

我遇到了同样的问题

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

结合

margin: 0 auto;

在子元素上。它们被推出容器 div。

但是，我通过尝试错误和阅读解决了它

https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items

和

Flexbox IE10 width issues

最后我用替换解决了它

-ms-flex: 1; 

与

-ms-flex: 1 0 auto;

小心。这仅适用于您确实需要在 flex 列内设置最大宽度的情况。否则它看起来像 display:block。

Answer 3

在我的情况下，我有类似的东西：

HTML：

<div class='my-flexbox'>
        <div class='wrapper'>
            <div class='content'>
                <!-- ... -->
            </div>
        </div>
</div>

CSS：

.my-flexbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.wrapper {
    padding: 16px;
    margin: auto;
    max-width: 90%;
    min-width: 40%;
}

.content没有具有任何类型的固定宽度（或高度），而是包含内联元素和块元素的组合。

我希望我的内容水平和垂直居中显示，但请尊重.wrapper 的max-width 和max-height。在.my-flexbox 上指定justify-content: center; 会将内容从屏幕推到右侧（对我来说似乎是一个错误），align-items: center; 没有影响（据我所知这是默认行为）。

改为解决方案是将align-self: center; 添加到.wrapper。

为什么这有任何意义，我无法理解。大概这只是 IE11 中 flexbox 的错误实现。