flex布局中的自动占满剩下的内容

没点击的时候

点击完后的样子：

代码：

<template>
  <div class="app">
    <div class="box" >
      <div class="box1"
           :style="{height : isTrue ? '200px':'auto'}"
           @click="clickButton"
      >
        box1
      </div>
      <div class="box2">box2</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
      return {
          isTrue:true
      }
  },
  methods:{
    clickButton(){
        this.isTrue = ! this.isTrue
    }
  }
}
</script>

<style lang="less" scoped>
  .box{
    display: flex;
    width: 100%;
    /*height: 100%;*/
    height: 100vh;
    flex-direction: column;
    background-color: yellow;
    .box1{
      width: 100%;
      background-color:deeppink;
    }
    .box2{
      width: 100%;
      flex: auto;
      background-color: green;
    }
  }
</style>

做成这个需要有三个前提条件

1、父盒子(box)要设置 display: flex;  flex-direction: column;前两个固定的 height: 100vh;高度必须设置

2、子盒子1(box1)高度必须是根据条件判断必须包括一个定高，一个auto

3、子盒子2(box2)必须设置flex为auto