IE 11中的卡位置与Firefox不同

Question

我正在尝试使用Materialized框架来构建响应式网站。我在IE中我的卡位置不正确时遇到问题。但是，它在Firefox中工作正常。我不确定问题出在哪里。我的假设与我设置为“自动”的边距有关。

我已尝试在主体{}和主体{}中的Style.CSS和Materialized.CSS中对其进行更正。但是仍然有问题。

容器：

.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 {
  flex: 1 0 auto;
}

Firefox和IE的输出不同。

选中两个屏幕截图Here。