Internet Explorer adds additional padding to flex box. How to fix?

Question

I have three flex-box cards each identical with an img at the top followed by an info section split into two columns. It looks fine in all browsers, except Internet Explorer 9 and 11 (I haven't been able to test IE10). The problem is that there is an excessive amount of bottom padding that has been added. Please can someone advise how to fix this?

.features-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 120rem;
  width: 100%;
}

.features-card {
  box-shadow: 0 .6rem .9rem 0 rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  transition: transform .3s;
  width: 100%;
}

.features-card:nth-child(3) {
  margin-bottom: 0;
}

.features-card-img {
  border-bottom: 3px solid #fdd400;
}

.features-card-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1.6rem 5%;
  width: 100%;
}

.features-card-info-col-1 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  width: 100%;
}

.features-card-info-col-2 {
  margin-left: 1rem;
}

@media screen and (min-width: 56.25em) {
  /* 900/16 */
  .features-container {
    flex-direction: row;
  }
  .features-card {
    margin-right: 2.5%;
    max-width: 35rem;
  }
  .features-card:nth-child(3) {
    margin-bottom: 3rem;
    margin-right: 0;
  }
}

<div class="features-container">
  <article class="features-card">
    <a class="features-card-link" href="">
      <img class="features-card-img" src="" alt="">
      <div class="features-card-info">
        <div class="features-card-info-col-1">
          <h3 class="features-card-heading">Heading</h3>
          <p class="features-card-text">Some text</p>
        </div>
        <div class="features-card-info-col-2">
          <i class="fas fa-angle-double-right"></i>
        </div>
      </div>
    </a>
  </article>
</div>

Answer 1

IE9 do not support flexbox. You can refer to the first answer of this question: Flexbox code working on all browsers except Safari. Why? I used your code to make a demo and it looks fine in all browsers including IE11. Modify the css part and it will looks the same in IE10:

.features-card-img { border: 0px; border-bottom: 3px solid #fdd400; }