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 不具有任何类型的固定宽度（或高度），而是包含内联元素和块元素的组合。

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

而解决方案是将align-items: center;添加到align-self: center;。

为什么这有任何意义超出我的意义。据推测，这只是IE11中flexbox的一个错误实现。

IE11 flexbox max-width和margin：auto;

3 个答案: