布局高度自适应

<template>
  <div class="box">
    <div class="item1">
      <el-button type="primary" @click="show">btn</el-button>
    </div>
    <div v-show="flag" class="item2">显示隐藏</div>
    <div class="item3">
      <div class="item4">随便多高</div>
      <div class="item5">自适应高度</div>
      <div class="item6">底部</div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  name: 'HelloWorld',
  data() {
    return {
      flag: true
    }
  },
  methods: {
    show() {
      if (this.flag) {
        this.flag = false
      } else {
        this.flag = true
      }
    }
  },
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.item2 {
  height: 50px;
}
.item3 {
  height: 100%;
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
}
.item4 {
  height: 200px;
}
.item5 {
  height: 100%;
  border: 3px solid pink;
}
.item6 {
  height: 50px;
  border: 1px solid green;
}
</style>