Html 如何在IE中创建带有排水沟的柔性行？

我有一个flexbox行和两列。HTML是这样的

<div class="flex-row">
<div class="col col-38 grey">
<div class="text">
    <h2>Headline
    </h2>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui  officia.
    </p>
    <button>Contact
    </button>
 </div>
</div>
<div class="col col-62">
</div>

---

这适用于Firefox和Chrome，但在IE11中，单元格是堆叠的，而不是一行，而cell38实际上比Firefox和Chrome中的要大。我怎样才能使它也适用于IE 11？

我用IE 11和Chrome测试你的代码。我发现输出是相似的，但在IE 11中，应用于的对齐项：中心。灰色类不提供任何影响导致了此问题。IE 11的测试结果：您可以使用任何与IE兼容的可选属性进行测试，这可能有助于解决问题。这对您来说很奇怪，因为当我使用IE查看它时，列在不同的行中，例如，38和62列不在一行上。您可以再次尝试使用上述代码进行测试，并告知结果。我使用IE 11和Chrome测试您的代码。我发现输出是相似的，但在IE 11中，应用于的对齐项：中心。灰色类不提供任何影响导致了此问题。IE 11的测试结果：您可以使用任何与IE兼容的可选属性进行测试，这可能有助于解决问题。这对您来说很奇怪，因为当我使用IE查看它时，列在不同的行中，例如，38和62列不在一行上。您可以再次尝试使用上述代码进行测试，并告知结果。

.home-flex-row{
margin:5px -5px 5px !important;
display:flex;
flex-wrap:wrap;
align-items:stretch;
 }

 .col {
margin:5px;
min-height:560px;
 }

 @media(max-width:991px){

.col{
    flex-basis: 100%;
}
 }

 @media(min-width:992px){
.col-38{
    flex-basis:calc(38% - 10px);
}

.col-62{
    flex-basis:calc(62% - 10px);

}
 }

 .col-62{
background:url(http://...);
background-size:cover;
 }

 .grey{
background:#e6e6e6;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:80px;

 }

 .text{
max-width:455px;

 }