css让目标盒子占满父盒子剩余的所有高度（兄弟盒子的高度是变化的）

一、背景简述

    日常开发中，我们会遇到一个父盒子下面有多个兄弟元素，且兄弟元素的高度可能随着业务数据的变动而发生改变，而我们需要目标子盒子的高度占据满剩余高度，这个时候没办法设置height百分百（会超出导致父盒子产生滚动条），也没办法使用calc计算（兄弟盒子的高度未知），这时候就可以使用flex布局实现。

    具体来说：可以将父元素设置为 display: flex 和 flex-direction: column，然后将 listDiv 设置为 flex-grow: 1，这样它就会占据剩余的所有高度。

二、实现代码

1.页面布局代码

 <div class="containerDiv">
      <div class="tagsDiv">XXX</div>
      <div class="listDiv">YYY</div>
 </div>

2.css代码

假设兄弟tagsDiv随业务数据变化，高度会被内容撑开逐渐变化

    containerDiv: {
        display: "flex",
        flexDirection: "column",
        height: "100%", // 确保父元素占据全高
    },
    listDiv: {
        flexGrow: 1, // 占据剩余的所有高度
        overflow: "auto", // 如果内容超出高度，添加滚动条
    },