Проблема в IE11 со строкой (с использованием flexbox), не остаётся ниже, но покрывает первый ряд

Question

В нижнем колонтитуле я создаю «сетку».Проблема в том, что в IE11, строка ниже, не остаётся ниже, как в Chrome / Firefox, а идет через первую строку;

В IE11 строка с «Сроком использования», «Все права»зарезервировано "является проблемой.

.footer {
display:flex;
flex-grow: 0;
margin: 1.5rem auto 1.5rem;
width: 100%;
flex-direction: column;
}

.footer > div {
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
flex-basis: 100%;
display:flex;
}

.footer > :first-child {
    margin: 1.5rem 0 0;
}

.navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
}

<footer class="footer">
<div>
  <div class="navbar">
    <div class="items">
      <a href="#">Lorem A</a>
      <a href="#">Lorem B</a>
      <a href="#">Lorem C</a>
      <a href="#">Lorem D</a>
      <a href="#">Lorem E</a>
    </div>
     <div class="items">
      <a href="#">Arcom A</a>
      <a href="#">Arcom B</a>
      <a href="#">Arcom C</a>
    </div>
  </div>
  <div class="action">
    <button><span>AddFree</span></button>
  </div>
    <div class="email">
      <form>
         <input c name="email" placeholder="Email">
         <p>Lorem ipsum arcom dolores.</p>
       </form>
     </div>
</div>
<div>
    <div class="tpa">
        <span><a href="">Term of Use</a></span>
        <span><a href="">Privacy</a></span>
        <span><a href="">About</a></span>
    </div>
    <div class="cop">LoremAll rights reserved.</div>
</div>
</footer>

Скриншот IE 11:

Answer 1

Пожалуйста, удалите flex-basis свойство,

.footer>div {
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
  /**flex-basis: 100%;*/
  display: flex;
}