你现在要排查并修复一个前端页面问题：
问题现象：
页面初始进入时显示正常，但数据加载完成后，如果调整浏览器宽度、高度、侧边栏状态、Tab 可见性或父容器尺寸，页面会出现显示不全。常见表现包括：表格右侧列被裁掉、底部内容被遮挡、横向或纵向滚动异常、图表或表格尺寸停留在旧状态。
排查目标：
不要只修表面现象，要定位真实根因，并做可复用、稳定的修复。优先从布局容器、尺寸计算方式、重算时机三个方向排查。
请严格按下面顺序执行：
1. 先定位页面的真实主内容组件
- 找到页面入口组件、实际渲染表格/图表/列表的组件、外层布局容器。
- 如果是微前端、iframe、路由壳页，继续定位到真正的业务组件，不要停留在壳层。
2. 检查是否存在 flex/grid 收缩问题
- 逐层检查页面根容器、内容区容器、表格/图表包裹层、loading/skeleton 包裹层、第三方组件 wrapper。
- 重点检查这些样式是否缺失或错误：
- min-width: 0
- min-height: 0
- width: 100%
- height: 100%
- overflow: hidden/auto
- 如果页面使用 display: flex，优先怀疑某一层缺少 min-width: 0 或 min-height: 0。
3. 检查尺寸计算是否依赖错误参考系
- 搜索是否存在类似以下逻辑：
- window.innerHeight - rect.top - xxx
- document.body.clientHeight - xxx
- 初始化时只算一次高度/宽度
- 如果存在，优先改为基于“实际容器可用尺寸”计算，而不是基于视口减 magic number。
- 优先使用容器的 clientHeight / clientWidth，再扣减 header/footer/toolbars 的真实尺寸。
4. 检查是否只监听了 window.resize
- 搜索：
- window.addEventListener('resize', ...)
- ResizeObserver
- 数据变化监听
- loading 状态变化监听
- 如果只有 window.resize，补充容器级监听和数据渲染后重算。
- 对以下事件都要考虑重算：
- 数据加载完成
- loading 结束
- 查询区换行
- 父容器尺寸变化
- Tab/抽屉/弹窗显示切换
- 侧边栏展开收起
5. 检查第三方组件是否需要主动刷新
- 如果是表格、图表、虚拟列表、地图、编辑器、canvas 组件，确认是否需要显式调用：
- resize()
- doLayout()
- refresh()
- 重设 scroll.y
- 容器尺寸正确但内容显示仍不对时，优先怀疑这里。
6. 修复时遵循以下原则
- 最小改动，只动与当前问题直接相关的页面和容器。
- 优先修根因，不要只加临时 height: calc(...) 或超大 magic number。
- 如果是列表/表格页，成套修复：
- 补 flex 容器收缩约束
- 改尺寸计算方式
- 补充容器 resize 监听
- 补充数据/loading 后重算
- 如果多次触发重算，统一通过调度函数合并，优先使用：
- requestAnimationFrame
- 渲染后测量机制（如 Vue nextTick / React layout effect）
- 不要在多个地方散落重复测量逻辑。
7. 输出时必须说明
- 真实根因是什么，不要只说“样式问题”
- 改了哪些文件
- 哪些容器补了 min-width: 0 / min-height: 0
- 尺寸计算从什么方式改成了什么方式
- 新增了哪些监听或重算触发点
- 如何验证修复有效
8. 验证至少覆盖以下场景
- 首次进入页面
- 数据加载完成后
- 浏览器从宽变窄
- 浏览器从窄变宽
- loading 切换前后
- 顶部筛选区或提示区换行前后
- 如果是微前端，还要验证宿主壳页内表现
实现偏好：
- 优先用容器真实尺寸，不要依赖视口减偏移估算。
- 优先用 ResizeObserver + requestAnimationFrame + 渲染后测量 的组合。
- 对关键 flex 容器默认补：
- width: 100%
- min-width: 0
- min-height: 0
- 保持代码可复用、可解释，不要只做一次性 patch。
如果你发现问题同时来自“布局收缩约束缺失”和“尺寸重算时机不完整”，请成套修复，不要只修其中一处。