Flex框对齐在IE中不起作用

Question

我创建了一个使用flexbox进行对齐的页面，它在chrome和firefox中运行良好，但它在IE中完全消失了。有一种方法可以让它在IE10和IE11中运行。

请检查以下代码

 <div class="wrapper">
  <div class="header-main">
    <div class="header-flexbox-row">
      <div class="header-first">Left</div>
      <div class="header-second">Right</div>
    </div>
  </div>
  <div class="content-main" ng-repeat="level in list.data.left">
    <div class="content-flexbox-row">
      <div class="content-first padding20">
        <div class="approver-names margin25" ng-repeat="approver in list.data.left[$index]">
          <div class="approver-group">
            <div class="group group-id">{{::approver.GroupId}}</div>
            <div class="group group-name">{{::approver.Name}}</div>
          </div>
          <div class="group-image">
            <i class="fa fa-smile-o fa-4x" aria-hidden="true"></i>
          </div>
        </div>
        <div class="approver-names">+ ADD SELECTOR</div>
      </div>
      <div class="content-second padding20">
        <div class="approver-names">
          <div>I</div>
        </div>
      </div>
      <div class="content-third padding20">
        <div class="approver-names margin25" ng-repeat="endorser in list.data.right[$index]">
          <div class="group-image">
            <i class="fa fa-smile-o fa-4x" aria-hidden="true"></i>
          </div>
          <div class="approver-group">
            <div class="group group-id">{{::endorser.GroupId}}</div>
            <div class="group group-name">{{::endorser.Name}}</div>
          </div>
        </div>
        <div class="approver-names">+ ADD SELECTOR</div>
      </div>
    </div>
  </div>
</div>

请在下面找到plunker https://plnkr.co/edit/Mkfn9AlFyNF5Y3bsECgu?p=preview