Положение карт в IE 11 отличается от Firefox

Question

Я пытаюсь создать адаптивный сайт с использованием Materialized Framework. У меня проблема с неправильным расположением карты в IE. Тем не менее, он отлично работает в Firefox. Я не уверен, где проблема происходит. Мое предположение связано с тем, что я установил значение Авто.

Я пытался исправить это в Style.CSS и Materialized.CSS в main {} и body {}. Но все еще проблема.

Контейнер:

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
  min-height: 100%;
}

Состав:

<main>

  <div class="container main-content">

    <!-- Test Automation Cards -->


    <div class="col s12" style="padding-top: 40px;padding-bottom: 50px;text-align: center">
      <p class="flow-text center">Design Tools</p>
    </div>

    <div class="row" style="display: flex;flex-wrap: wrap;justify-content: center;">


      <div class="col s12 m6 l4" style="flex: 20%; max-width: 30%;box-sizing: border-box;padding: 15px;">
        <a href="http://agilehq/" target="_blank">
          <div class="card waves-effect">
            <div class="card-image">
              <img src="img/agile.png">
              <span class="card-title"></span>
            </div>
            <div class="card-content" style="text-align: center">
              <p>Search Design Documents</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m6 l4" style="flex: 20%; max-width: 30%;box-sizing: border-box;padding: 15px;">
        <a href="http://sharepoint/sites/wip/WorkInProgress/Forms/Project.aspx" target="_blank">
          <div class="card waves-effect">
            <div class="card-image">
              <img src="img/folder.png">
              <span class="card-title"></span>
            </div>
            <div class="card-content" style="text-align: center">
              <p>WIP ShareDrive</p>
            </div>
          </div>
        </a>
      </div>

      <div class="col s12 m6 l4" style="flex: 20%; max-width: 30%;box-sizing: border-box;padding: 15px;">
        <a href="http://crdr/" target="_blank">
          <div class="card waves-effect">
            <div class="card-image">
              <img src="img/tfs.jpg">
              <span class="card-title"></span>
            </div>
            <div class="card-content" style="text-align: center">
              <p>CRDR</p>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>


</main>

Main:

main {
  flex: 1 0 auto;
}

Выходные данные в Firefox отличаются от IE.

Проверьте оба снимка экрана Здесь .