Html “弹性方向”列使弹性项目与IE11重叠

我在IE11中使用flexbox时遇到了一个问题。使用弹性方向：列时，弹性项目重叠：

在其他浏览器（chrome、safari）中，它如下所示：

.container{
显示器：flex；
弯曲方向：立柱；
}
.flex{
弹性：10%；
}

你好
世界
而不是
flex:10%使用
flex:1自动


.container{
显示器：flex；
弯曲方向：立柱；
}
.flex{
flex:1自动；
}

你好
世界
这是由
.flex
类中的0%引起的。将其更改为“自动”，则不会出现问题：

.flex {
  flex: 1 1 auto;
}

IE11和伸缩方向：柱反向存在类似问题
我改为使用css
order
属性，而不是
flex-direction
这个问题的特殊解决方案是，我需要显式设置包含元素的宽度。由于
flex
设置为
column
IE11将自动扩展容器的宽度，以容纳子容器的内容（请记住，flex框在
column
对齐时从侧面翻转，因此当它们溢出时，它们会水平而不是垂直增长）

因此，我的代码如下所示：

.container {
  display: flex; 
  flex-direction: column;
  width: 100%; // needs explicit width
}

.flex {
  flex: 1 1 auto; // or whatever
}

还要注意
flex:1编译为
flex:10%，因此（对于IE用户）最好明确地编写
flex:1 auto，如上所述