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

Posted 2023-03-05

【中文标题】IE11 flexbox 最大宽度和边距：自动；

【英文标题】：IE11 flexbox max-width and margin:auto;

【发布时间】：2015-11-01 10:24:11

【问题描述】：

我有一个简单的 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 解决这个问题？我错过了一些财产吗？

【参考方案1】：

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

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

【讨论】：

您的解决方案在 IE10 和 IE11 中都适用于我！感谢您发布此内容，即使您认为为时已晚。它当然帮助了我！谢谢！

您的解决方案使元素占据max-width中指定的全部数量，因此与将max-width替换为width没有任何区别

@torvin 不同的是，该方法允许元素根据其容器的约束进行缩小。明确设置 width 将强制元素为该宽度，即使其容器更窄。

@tmo256 您绝对应该发布一个示例来演示前后效果。正如你所说的那样简单，它在我的情况下不起作用。

【参考方案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。

【讨论】：

这对我来说是一个解决方案。

谢谢！由于 flex-basis auto 或 0% 在 ie11 上具有 max-width 的元素上没有按预期工作，我遇到了同样的问题。该链接非常有帮助:)

看在上帝的份上，请停止制作微软浏览器。

【参考方案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 的错误实现。

【讨论】：

align-[self/items] 适用于垂直定位，not 水平 - 所以这不能回答 OP 关于边距和最大宽度的问题

@IanClark 我知道align-self 不应该解决了 OP 的问题，但是，至少在我的（非常相似的）案例中它做到了。因此我的声明是，“大概这只是 IE11 中 flexbox 的一个错误实现。”

感谢@BenjaminDobell 您的解决方案帮助我解决了我的问题。我现在将这个疯狂的 hack 加入到仅限 IE 的媒体查询中，所以只有 IE 才能读取它。