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上有不兼容的現象