设置表格区高度自适应不撑开页面出现滚动条，而是自己出现滚动条，的布局技巧.html

<!-- 有这样一个结构 -->
<div class="wrapper">
  <div>筛选条件区</div>
  <div class="tb-wrap">
    <!-- 表格区，可以是el-table或者vxe-table -->
    <el-table></el-table>
    <!-- 或者 -->
    <vxe-table></vxe-table>
  </div>
</div>
<!-- 
  我们要实现表格的高度自动随着容器高度的变化而变化，即只占容器除去筛选区的高度
  这样设置样式：
-->
<style type="text/css">
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.tb-wrap {
  min-height: 0;
  flex: 1;
}
</style>
<!--
  如果表格组件支持 height: 100% 那最好，就不用设置自己再使用js设置了
  如果表格组件只支持传入一个绝对的height数值，那就得通过js计算得到了
  即：容器高度 - 筛选区高度 - gap
  window resize 时再计算一次
  问题
    但我们计算一次后，给表格组件赋值了高度，此时它已经将自己的父级div(flex item)撑开
    下一次再计算时，flex father的高度已经是撑开后的高度，导致无效
    因此需要处理一下，即把表格组件的父级(flex item)的高度不能被子级撑开
    因此再增加一层div.box包裹表格组件，设置样式如下
-->
<style type="text/css">
.tb-wrap {
  position: relative;
}
.box {
  position: absolute;
  inset: 0;
}
</style>