Explorer 11上的Flexbox包装宽度

Question

我有一个简单的代码，开始使用flexbox。像往常一样，在Firefox，Safari，Chrome，Edge，Opera上都很完美，但在IE11上则不然。

关于一些在定义区域内包含图像和文本的反复帧。在我的代码上我只使用display: -webkit-flex; display: -ms-flexbox; display: flex;，这就足够了。但在IE11上我看到了四列：

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

（最好在整页上看到这个片段） 有什么帮助吗？

＆＃13;

＆＃13;

html{
position:absolute;
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;
}

#FRAME {display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-flow: row;
overflow: hidden;
position: relative;
-ms-flex-preferred-size:25%;
flex-basis:25%;
width: 25%;
float:left;
background: #FFFFFF;
justify-content: space-between;
box-sizing:border-box;
border: solid 0.1rem gray;
}

.IMAGECOL{-ms-flex-preferred-size:63%;
flex-basis:63%;
width:63%;
display: block;
position: relative;
float:left;
padding: 0.22rem;
left:0%;
}

.IMAGECOL img {
display:block;
width:100%;
}

.INFOCOL{-ms-flex-preferred-size:37%;
flex-basis:37%;
width:37%;
background: #e9e9f3;
float:left;
margin-top: 0.075rem;
margin-left: 0.075rem;
padding: 0.22rem;
max-height:100%;
}




/*TEXT*/
.SUJET {padding-right: .5em;
}
.COMPANY {color: #FF0004;
font-weight:800;
line-height:0.8rem}
.DATE {
line-height:1.35rem;
font-weight:300;}
.HEAD{font-size:4rem;
white-space:nowrap;
margin-bottom:1rem;
margin-bottom:1.5rem;
color: #747691;
}
.SUBHEAD{font-size:3rem;
/*white-space:nowrap;*/
margin-bottom:0.5rem;
color: #747691;
text-align:center;
line-height: 3rem;}
.NAME {margin-bottom:0.1rem;
font-weight:400;
font-size:2.5rem;
color: #b0b1c8;
line-height:0;
letter-spacing: 0.35rem;
}
.MAIN{font-size:1.144rem;
margin-bottom:1.25rem;
padding:0 2rem;
text-align:center;
color: #747691;
line-height: 2.2rem;
letter-spacing: 0.35rem;
}

.LINE {background: darkgray;
height: 1px;
margin-top: 6px;
margin-bottom: 6px;
}
.LINE2{background: darkgray;
height: 1px;
margin-top: 8px;
margin-bottom: 4px;}

＆＃13;

<div id="FRAME">
<div class="IMAGECOL"><a href="#">
   <img src="https://ptkotamas.files.wordpress.com/2017/02/kaolin-cold-drip-900ml-1.jpg?w=246&h=246&crop=1"></a>
</div>
<div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span>
</div>
</div>

<div id="FRAME">
<div  class="IMAGECOL"><a href="#"><img src="https://ptkotamas.files.wordpress.com/2017/02/img_0928.jpg?w=246&h=246&crop=1"></a>
</div>
<div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span>
</div>
</div>

<div id="FRAME">
<div class="IMAGECOL"><a href="#"><img src="https://ptkotamas.files.wordpress.com/2017/02/esrum-11.jpg?w=329&h=329&crop=1"></a>
</div>
<div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span>
</div>
</div>

<div id="FRAME">
<div class="IMAGECOL"><a href=#">
<img src="https://ptkotamas.files.wordpress.com/2017/02/kaolin-cold-drip-900ml-1.jpg?w=246&h=246&crop=1"></a>
</div>
<div class="INFOCOL"><span class="SUJET">Lorem ipsum dolor sit amet</span><br><div class="LINE"></div><span class="COMPANY">FULLA</span><br><div class="LINE2"></div><span class="DATE">8/25/2017</span>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

删除CSS中position: absolute选择器中的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;
}