Html 资源管理器11上的Flexbox包装宽度

我有一个简单的代码，开始使用flexbox。和往常一样，它在Firefox、Safari、Chrome、Edge、Opera上都能完美工作，但在IE11上却不行

是关于在定义区域内具有图像和文本的一些响应帧。在我的代码中，我只使用

display:-webkitflex；显示：-ms flexbox；显示器：flex这就足够了。但在IE11上，我看到了四列：


我已经在Stackoverflow上发现了一些关于同一主题的问题，在回答之后什么也没有发生，甚至添加了更多的代码行，或者将最大或最小宽度或高度替换为宽度或高度。我想我做错了什么，但我不知道是什么

（最好看整版的片段）
有什么帮助吗


html{
位置：绝对位置；
字体大小：1.15rem；
字体系列：HelveticaNeue灯，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
字号：500；
线高：1.2rem；
颜色：#62647b；
身高：100%；
框大小：边框框；
保证金：4rem；
背景：灰色；
}
#帧{显示：-webkit flex；
显示：-moz flex；
显示：-ms flexbox；
显示：-o-flex；
显示器：flex；
-webkit柔性方向：行；
-moz弯曲方向：行；
-ms柔性方向：行；
-o-弯曲方向：行；
弯曲方向：行；
-webkit柔性包装：包装；
柔性包装：包装；
柔性流：行；
溢出：隐藏；
位置：相对位置；
-ms-flex首选尺寸：25%；
弹性基准：25%；
宽度：25%；
浮动：左；
背景：#FFFFFF；
证明内容：之间的空间；
框大小：边框框；
边框：实心0.1rem灰色；
}
.IMAGECOL{-ms flex首选尺寸：63%；
弹性基准：63%；
宽度：63%；
显示：块；
位置：相对位置；
浮动：左；
填充：0.22rem；
左：0%；
}
.IMAGECOL img{
显示：块；
宽度：100%；
}
.INFOCOL{-ms flex首选尺寸：37%；
弹性基准：37%；
宽度：37%；
背景：#e9e9f3；
浮动：左；
保证金上限：0.075雷姆；
左边距：0.075雷姆；
填充：0.22rem；
最大高度：100%；
}
/*正文*/
.SUJET{右侧填充：.5em；
}
.公司{颜色：#FF0004；
字号：800；
线条高度：0.8rem}
.日期{
线高：1.35雷姆；
字体大小：300；}
.HEAD{字体大小：4rem；
空白：nowrap；
边缘底部：1rem；
保证金底部：1.5雷姆；
颜色：#747691；
}
.分目{字体大小：3rem；
/*空白：nowrap*/
边缘底部：0.5雷姆；
颜色：#747691；
文本对齐：居中；
线条高度：3rem；}
.NAME{页边距底部：0.1rem；
字体大小：400；
字体大小：2.5rem；
颜色：#b0b1c8；
线高：0；
字母间距：0.35rem；
}
.MAIN{字体大小：1.144rem；
保证金底部：1.25雷姆；
填充：02rem；
文本对齐：居中；
颜色：#747691；
线高：2.2rem；
字母间距：0.35rem；
}
.LINE{背景：暗灰色；
高度：1px；
边缘顶部：6px；
边缘底部：6px；
}
.LINE2{背景：暗灰色；
高度：1px；
边缘顶部：8px；
页边距底部：4px；}

Lorem ipsum dolor sit amet
FULLA
2017年8月25日
Lorem ipsum dolor sit amet
FULLA
2017年8月25日
Lorem ipsum dolor sit amet
FULLA
2017年8月25日
Lorem ipsum dolor sit amet
FULLA
2017年8月25日
摆脱CSS中
html
选择器中的
位置：绝对
，如下所示：

html{
font-size:1.15rem;
font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-weight:500;
line-height:1.2rem;
color: #62647b;
height: 100%;
box-sizing: border-box;
margin: 4rem;
background: gray;
}

几年后我才意识到这一点！感谢使用与此相同的id是无效的，很可能会给以后带来意想不到的麻烦。