Как я могу создать гибкий ряд с желобами в IE?

Question

У меня есть строка 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>

и КСС

.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;

 }

Это работает для Firefox и Chrome, но в IE 11 ячейки сгруппированы, а не в одном ряду, а cell38 на самом деле больше, чем в Firefox и Chrome. Как я могу заставить его работать и в IE 11?