邹城住房城乡建设部网站网页设计模板html代码个人介绍

问题：子元素百分比高度失效

原因分析：

子元素设置百分比高度是基于父容器的显式高度计算的。
而在 Flex 布局中，父容器通过 flex: 1; 动态分配高度时，其高度属于隐式高度。（可以理解为父容器高度此时受子元素影响）

此时，子元素的百分比高度将因无法获取确定的父级高度参考值而失效，导致子元素高度回退为内容高度，即子元素高度会由其内容决定。若子元素内容过长，就会撑开父容器高度，进而破坏页面整体布局。

解决方法：子绝父相

<div style="display: flex;flex-direction: column;height: 100%;width: 100%;"><div class="table_container" style="flex: 1;position: relative;"><el-table :data="xxx" border style="position:absolute;height: 100%;"></el-table></div>
</div>

el-table 样式设置为 position:absolute;height: 100%; 表格外部容器 样式设置为 flex: 1;position: relative;

子元素绝对定位能够脱离文档流，避免影响父容器的布局和尺寸计算。此时，子元素就可以获取到确定的父级高度参考值，使得百分比高度生效。

参考：

vue3 element-plus flex布局 el-table表格高度自适应（设置百分比高度失效），超出显示滚动条 大屏