我有一个包含两个元素的简单 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 修复此问题?我是否缺少某些属性?
最佳答案
我找到了一个似乎有效的答案(虽然我承认我没有在 IE 10 中测试过它):我将 width: 100%
添加到需要对齐的元素。在 IE 中运行良好。
可能为时已晚,无法为您提供帮助,但也许其他人会需要解决方案。
关于html - IE11 flexbox 最大宽度和边距 :auto;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31903734/