盒子总体高度不变，如何让盒子里面的一个div的高度随着另外一个div高度的变化而变化

<template>
  <div class="home">
    <div class="head">
      <div class="head-cell">1 <button @click="change">hide/show</button></div>
      <div class="head-cell" v-show="show">2</div>
    </div>
    <div class="content">3</div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const show = ref(false);
const change = () => {
  show.value = !show.value;
};
</script>
<style lang="less" scoped>
.home {
  height: 800px;
  display: flex;
  flex-direction: column;
  .head {
    background-color: aqua;
    .head-cell {
      height: 40px;
    }
  }
  .content {
    flex: 1;
    background-color: bisque;
  }
}
</style>