左右两栏高度不一致的核心原因是子项未在交叉轴上自动拉伸；需确保父容器设为 display: flex 且保留 align-items: stretch 默认值，同时子项避免 height、position: absolute 等抑制拉伸的属性，并统一 box-sizing: border-box。
左右两栏高度不一致，核心原因是子项未在交叉轴上自动拉伸。Flex 布局本身天然支持等高，但需要满足两个前提：父容器是 display: flex，且子项未主动破坏 align-items: stretch 的默认行为。
确保父容器启用 flex 并保留默认对齐
父元素必须设置 display: flex，且不要显式覆盖 align-items 为 flex-start、center 等值——除非你明确需要非拉伸对齐。默认的 align-items: stretch 就是让子项在垂直方向（交叉轴）自动撑满容器高度的关键。
- ✅ 正确：
align-items: stretch（可省略，因它是默认值） - ❌ 错误：
align-items: flex-start—— 会取消拉伸，导致高度按内容自身决定 - ⚠️ 注意：若子项设置了
height、min-height或flex-shrink: 0且内容极短，也可能抑制拉伸效果
检查子项是否意外限制了拉伸能力
即使父容器配置正确，子项自身的一些 CSS 属性仍可能“拒绝”被拉伸。常见干扰项包括：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 设置了固定
height或max-height - 使用了
position: absolute或float，使其脱离 flex 流 -
flex: none（即flex: 0 0 auto）搭配了过小的min-width/min-height - 内部内容触发了
min-height: auto的隐式限制（尤其在嵌套 flex 容器中）
建议统一移除子项的显式高度控制，仅靠 flex 自然撑开；如需最小高度，改用 min-height: 0（配合 overflow 场景更安全）。
边框/背景视觉不齐？补上 box-sizing
有时左右栏看似“高度不等”，其实是边框或内边距导致视觉错觉。例如左栏有 border-right，右栏没有，或两者 padding 不同。
- 给所有子项加上
box-sizing: border-box，确保 padding 和 border 不额外增加高度 - 统一设置
padding和border，或用伪元素模拟边框以保持结构干净 - 若需右侧滚动条，记得加
min-width: 0防止 flex 子项因内容过长而挤压左栏
Vue Element UI 中 el-row/el-col 的特别处理
el-row 默认不是 flex 容器，它只是普通 div。要启用等高，必须手动开启 flex 支持：
- 给
el-row添加display: flex和align-items: stretch - 或直接使用
type="flex"属性（Element Plus 支持）：<el-row type="flex" align="middle">—— 其中align控制交叉轴对齐，不影响等高，但stretch是默认值 - 避免混用
inline-block或浮动布局，否则 flex 失效
