17370845950

左右两栏高度不一致的核心原因是子项未在交叉轴上自动拉伸；需确保父容器设为 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 属性仍可能“拒绝”被拉伸。常见干扰项包括：

• 设置了固定 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 支持）： —— 其中 align 控制交叉轴对齐，不影响等高，但 stretch 是默认值
• 避免混用 inline-block 或浮动布局，否则 flex 失效