Vue Element Flex 布局表格嵌套问题

使用场景：在使用flex布局时，嵌套element ui 表格。

问题：父元素采用 flex 布局，子元素使用 “flex-grow:1” 以占满父元素剩余空间。然而，内部嵌套的表格（已设置 height=‘100%’）在展示数据超出父元素空间时，会撑破父元素，且应出现的滚动条未出现。即便子元素也采用同样结构的 flex 布局（将表格设置为 “flex-grow:1”），也无法解决问题。这反映出表格在 flex 布局中无法正确获取高度（问题暂未深入研究）。

<div style="height: 100%;display: flex;flex-direction: column">
  ....其他元素
  <div ref="tableBody" style="flex-grow: 1;">
       <el-table
         :height="'100%'">
        </el-table>
  </div>
</div>

解决方案：将子父元素分别设置“position”样式，表格高度参数设置为“100%”（此时高度正常且能配合父元素进行自适应滚动条也正常显示），如下所示

.parent {
   position: relative;
 }
.child {
   position: absolute;
 }

修改后代码

<div style="height: 100%;display: flex;flex-direction: column;">
  ....其他元素
  <div ref="tableBody" style="flex-grow: 1;position: relative">
       <el-table
          style="position: absolute"
         :height="'100%'">
        </el-table>
  </div>
</div>