Html IE11 flexbox 最大宽度和边距：自动；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31903734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE11 flexbox max-width and margin:auto;
提问by svecon
I have a simple flexbox container with two items:
我有一个简单的 flexbox 容器，里面有两个项目：
<div id='container'>
<div id='first-item'>first item</div>
<div id='second-item'>second item</div>
</div>
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:
第一项有 flex-grow: 1 和 max-width 到 200px。第二项有 margin-left: auto; 与容器对齐：
#container {
display: flex;
}
#first-item {
max-width: 200px;
flex: 1;
}
#second-item {
margin-left: auto;
}
Here is a working demo: http://jsfiddle.net/c81oxdg9/2/
这是一个工作演示：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.
我希望第一个项目左对齐并有一些最大宽度。第二个项目要右对齐。
Works fine in Chrome, Firefox and even IE10, but not IE11. In IE11, the second item gets pushed out of the container.
在 Chrome、Firefox 甚至 IE10 中都可以正常工作，但不适用于 IE11。在 IE11 中，第二个项目被推出容器。
How to fix this for IE11? Am I missing some property?
如何为 IE11 解决此问题？我错过了一些财产吗？
回答by tmo256
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.
我找到了一个似乎有效的答案（尽管我承认我没有在 IE 10 中测试过它）：我添加width: 100%到需要对齐的元素中。在 IE 中效果很好。
Probably too late to help you, but maybe someone else will need the solution.
可能为时已晚，无法帮助您，但也许其他人需要解决方案。
回答by Fl0R1D3R
I had the same problem with
我有同样的问题
display: flex;
-ms-flex: 1;
max-width: 300px;
in combination with
结合
margin: 0 auto;
on the child elements. They get pushed out of the container div.
在子元素上。它们被推出容器 div。
However, I solved it with try and error and reading
但是，我通过尝试错误和阅读解决了它
and
和
Finally I solved it with replacing
最后我用替换解决了它
-ms-flex: 1;
with
和
-ms-flex: 1 0 auto;
Watch out. This only works, if you really need a max-width inside the flex columns. otherwise it will look like display:block.
小心。这仅在您确实需要 flex 列内的最大宽度时才有效。否则它看起来像 display:block。
回答by Benjamin Dobell
In my case I had something like:
就我而言，我有类似的东西：
HTML:
HTML：
<div class='my-flexbox'>
<div class='wrapper'>
<div class='content'>
<!-- ... -->
</div>
</div>
</div>
CSS:
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%;
}
.contentdoes nothave a fixed width (or height) of any sort, but instead contains a combination of inline elements and block elements.
.content没有不具有任何种类的固定的宽度（或高度），而是包含内嵌元素和块元件的组合。
I wanted my content to appear centred horizontally and vertically, but respect the max-widthand max-heightof .wrapper. Specifying justify-content: center;on .my-flexboxpushed the content off the screen to the right (seems like a bug to me), and align-items: center;had no impact (to my knowledge this is the default behaviour).
我想我的内容显示水平，垂直居中，但尊重max-width和max-height的.wrapper。指定justify-content: center;on.my-flexbox将内容从屏幕向右推送（对我来说似乎是一个错误），并且align-items: center;没有影响（据我所知，这是默认行为）。
Instead the solutionwas to add align-self: center;to .wrapper.
相反，解决方案是添加align-self: center;到.wrapper.
Why this makes any sense is beyond me. Presumably this is just a buggy implementation of flexbox in IE11.
为什么这有任何意义超出了我的理解。据推测，这只是 IE11 中 flexbox 的一个错误实现。
