flex 布局的天坑

今天在写布局的时候，我给父元素定义了

  align

align-items: center;

卧槽，神奇的事情发生了，子元素不能铺满父元素的高度,成了这个样子

<template>
  <div class="config-table">
    <div class="t-header">
      <div>
        <img src="../../static/svg/vs/icon_zhankai.svg" alt="">
      </div>
      <div class="title">保费测算</div>
    </div>
    <div class="t-body" v-for="(item,index) in 6" :key="index">
      <div class="body-first">种类 </div>
      <div class="body-value" v-for="(item,index) in 2" :key="index">
        种类保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算保费测算
      </div>

    </div>
  </div>

</template>
<script>
  import {
    mapState
  } from 'vuex'
  import {
    Message
  } from 'element-ui'
  import axios from 'axios'
  export default {
    data() {
      return {}
    },
    props: {

    },

    mounted() {

    },
    methods: {

    }
  }
</script>
<style lang="scss" scoped>
  @mixin flex {
    display: flex;
    align-items: center;
  }

  @mixin border-right {
    border-right: 1px solid #F2F2F2;
  }

  @mixin border-bottom {
    border-bottom: 1px solid #F2F2F2;

  }

  @mixin font {
    font-size: 14px;

    letter-spacing: 0;
    text-align: center;
    padding: 13px 11px;
  }

  .config-table {
    .t-header {
      height: 52px;
      background: #F0F6FF;
      @include flex;
      padding-left: 21px;
      align-items: center;

      img {
        width: 16px;
        vertical-align: -2px;
      }

      .title {
        margin-left: 7px;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0;
        font-weight: bold;
      }
    }

    .t-body {
      box-sizing: border-box;
      @include flex;

      &:last-of-type>.body-first {
        border-bottom: none;
      }

      &:last-of-type>.body-value {
        border-bottom: none;
      }

      .body-first {
        height: initial;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8A8F99;
        @include font;
        width: 240px;
        background: #FAFCFF;
        @include border-right;
        @include border-bottom;
      }

      .body-value {
        color: #333333;
        @include font;
        flex: 1;
        background: #FFFFFF;
        @include border-right;
        @include border-bottom;
      }
    }
  }
</style>

以后注释以后就能够，缘由不知道

另外我在错误的基础上用了absloute布局，可是在ie上有不兼容的现象