Html Flex-direction 列使 Flex 项目与 IE11 重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42764591/
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
Flex-direction column makes flex items overlap IE11
提问by Chantal
I'm running into an issue using flexbox in IE11. When using flex-direction: columnthe flex-items overlap:
我在 IE11 中使用 flexbox 时遇到问题。当使用flex-direction: columnflex-items 重叠时：
In other browsers (chrome, safari) it looks like this:
在其他浏览器（chrome、safari）中，它看起来像这样：
This is the css:
这是CSS：
.container {
display: flex;
flex-direction: column;
}
.flex {
flex: 1 1 0%;
}
And this is the html:
这是 html：
<div class="container">
<div class="flex">
Hello
</div>
<div class="flex">
World
</div>
</div>
I've made a codepen to demonstrate the issue:
我制作了一个代码笔来演示这个问题：
http://codepen.io/csteur/pen/XMgpad
http://codepen.io/csteur/pen/XMgpad
What am I missing to make this layout not overlap in IE11?
我缺少什么才能使此布局在 IE11 中不重叠？
回答by necilAlbayrak
It is caused by %0 on class
它是由课堂上的 %0 引起的
.flex {
flex: 1 1 auto;
}
change it to auto then it should not be a problem
将其更改为 auto 那么它应该不是问题
回答by 3rdthemagical
Instead of flex: 1 1 0%;use flex: 1 1 auto;
而不是flex: 1 1 0%;使用flex: 1 1 auto;
.container {
display: flex;
flex-direction: column;
}
.flex {
flex: 1 1 auto;
}<div class="container">
<div class="flex">
Hello
</div>
<div class="flex">
World
</div>
</div>回答by kmgdev
My particular solution to this issue was that I needed to explicitly set the width on the containing element. Since flexis set to columnIE11 will automatically expand the width of the container to accommodate the content of the children (remember that the flex boxes are flipped on their sides in columnalignment so when they overflow they grow horizontally instead of vertically).
我对这个问题的特殊解决方案是我需要明确设置包含元素的宽度。由于flex设置为columnIE11 将自动扩展容器的宽度以容纳子项的内容（请记住，弹性框在column对齐时在两侧翻转，因此当它们溢出时，它们会水平而不是垂直地增长）。
So my code would look like:
所以我的代码看起来像：
.container {
display: flex;
flex-direction: column;
width: 100%; // needs explicit width
}
.flex {
flex: 1 1 auto; // or whatever
}
回答by Adam
had similar issue with IE11 and flex-direction: column-reverseI changed to use the css orderproperty instead of flex-direction.
与 IE11 有类似的问题，flex-direction: column-reverse我改为使用 cssorder属性而不是flex-direction.
