在空的flexbox项目上设置最小高度不会扩展IE 11中父项的高度

Question

我正在尝试创建一个仪表板来显示一些高级财务信息，而我在IE11中无法正确显示布局。信息显示为“卡片”（材料设计），所述卡片中的元素使用flexbox定位。

以下是Firefox中设计的外观：

这是同样的设计，在IE11中呈现：

以下是布局卡片的HTML：

<section class="card pointer">
  <div class="card__body">
    <div class="flex-row">

      <!-- The left column, consisting only the "Pay Date" information -->
      <div class="flex-row__item">
        <div class="group-v">
          <div class="group-v__item">
            <h3 class="card__text--heading">Pay Date</h3>
          </div>

          <div class="group-v__item">
            <p class="card__text">Fri 04/01/16</p>
          </div>
        </div>
      </div>

      <!-- The right column, consisting of the "Events" and "Dollar Amt" information -->
      <div class="flex-row__item">
        <div class="flex-col">

          <!-- Events -->
          <div class="flex-col__item">
            <div class="group-v">
              <div class="group-v__item">
                <h3 class="card__text--heading text__align-right">Events</h3>
              </div>

              <div class="group-v__item">
                <p class="card__text text__align-right">45</p>
              </div>
            </div>
          </div>

          <div class="flex-col--empty"></div>

          <!-- Dollar Amt -->
          <div class="flex-col__item">
            <div class="group-v">
              <div class="group-v__item">
                <h3 class="card__text--heading text__align-right">Dollar Amt</h3>
              </div>

              <div class="group-v__item">
                <p class="card__text text__align-right">$1.99</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

卡片中间的空间由flex-row--empty元素实现。如果我设置card__body，我无法找到让card元素扩展到父min-height元素高度的方法，所以我决定实现与空间相同的效果。

不幸的是，IE11似乎不想扩展父元素以便正确呈现卡片。为了让IE以与Firefox相同的方式呈现卡片，有什么好的解决方法？

供参考，以下是flex-row和flex-col类的相关SASS：

.flex-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    min-height: 2rem;
    width: 100%;

    &--compact {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 1rem;
        min-height: 2rem;
        width: 100%;
    }

    &:last-child {
        margin-bottom: 0;
    }

    &--empty {
        min-height: 2rem;
    }

    &__item {
        flex: 1;
        text-align: center;

        &:first-of-type {
            margin-right: 0.5rem;
            text-align: left;
        }

        &:last-of-type {
            margin-left: 0.5rem;
            text-align: right;
        }

        &:only-of-type {
            margin: 0;
            text-align: left;
        }
    }
}