使用flex:1使盒子自适应高度

今天遇到一个小问题,就是列表上方的tag-box有展开功能,但下方的列表要实现展开后不超出大盒子,最开始想着大盒子溢出隐藏一了百了,结果发现最下面的几项item被隐藏了,因为tag-box中的tag是动态的,我也不知道有多少,所以得想个办法让他自适应

最开始想着用js去减高度来获取动态的固定高,但是过于愚蠢,所以想着有什么好点的办法,然后想到了flex的自动拉升高度,继而又想到了圣杯布局,然后灵光一闪

上代码

<template>
  <div class="box">
    <ul class="tag-box">
      <li v-for="item in tagList">{{ item.tag }}</li>
    </ul>
    <ul class="scroll-box">
      <li v-for="item in infoList">
        <div class="title">{{ item.title }}</div>
        <div class="content">{{ item.content }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup>

</script>

<style>
.box {
  display: flex;
  flex-direction: column;
  .tag-box{
    //tag-box高度是被撑开的
  }
  .scroll-box{
    flex:1;
  }
}
</style>