title: How can I create a flex row with gutters in IE?
body: <p>I have a flexbox row with two columns. HTML is like this</p>
  
  <pre><code>&lt;div class="flex-row"&gt;
  &lt;div class="col col-38 grey"&gt;
  &lt;div class="text"&gt;
      &lt;h2&gt;Headline
      &lt;/h2&gt;
      &lt;p&gt;Excepteur sint occaecat cupidatat non proident, sunt in culpa qui  officia.
      &lt;/p&gt;
      &lt;button&gt;Contact
      &lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col col-62"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>.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;
  
   }
  </code></pre>
  
  <p>This is working for Firefox and Chrome, but in IE 11 the cells are stacked and not in one row, and cell38 is actually larger then in Firefox and Chrome. How can I make it work for IE 11 as well?</p>