加 display: flex 后仍不等高，是因为父容器在交叉轴（默认y轴）无明确高度约束，且 align-items 未设为 stretch 或子项误设 height: 100%；grid 则通过 grid-template-rows: 1fr 或 grid-auto-rows: 1fr 实现真正可控等高。
用 display: flex 或 display: grid 就能天然实现两列等高，不需要 JS、不用 hack、不依赖内容顺序——前提是父容器在交叉轴（垂直方向）上有可参照的高度边界。
为什么加了 display: flex 还是不等高
Flex 子项等高不是“自动发生”的魔法，它依赖父容器在交叉轴（默认是 y 轴）上有明确尺寸。如果父容器 height 是 auto 且没被上级限制，子项就无高度可拉伸。
- 用开发者工具检查父容器的
computed height：如果是0px或auto且实际渲染为 0，那就是根源 - 常见干扰项：
align-items: flex-start会关闭拉伸，改回align-items: stretch（默认值） - 子项写了
height: 100%但父容器没设显式高？这会导致计算失败，直接删掉 - IE11 下
flex: 1拉伸不稳定，建议写成flex: 1 0 auto
display: grid 实现真正可控的等高列
Grid 不靠“拉伸”，而是靠轨道定义高度，更适合内容驱动或需要多行对齐的场景。两列等高只需一行声明，但必须明确行高策略。
- 最简写法：
grid-template-rows: 1fr—— 强制所有行高相等，适用于单行两列 - 内容动态增行时，用
grid-auto-rows: 1fr，新增行也会等高 - 别只设
grid-template-columns却漏掉行高控制，否则每行高度仍由内容决定 - Safari ≤15.4 对
1fr在grid-auto-rows中支持有 bug，可降级为minmax(0, 1fr)
别踩这些“看起来像等高”的坑
很多写法只是视觉欺骗，DOM 高度并不一致，响应式下极易崩坏。
-
position: absolute+ 固定height：父容器必须写死高度，内容超长会被裁切 -
float+ 负margin-bottom/ 大padding-bottom：靠overflow: hidden遮丑，实际高度不同，JS 获取offsetHeight会出错 -
display: table-cell：IE 支持尚可，但现代 Flex/Grid 下已无必要，且无法与 flex 容器嵌套共存 - 背景图模拟：换色、换列数、流体宽度时全得重切图，维护成本高
真正可靠的等高，核心就两点：父容器在交叉轴有高度约束，子项不主动设死高度。Flex 适合单行布局，Grid 更适合内容不可控或需二维对齐的场景——选哪个，取决于你是否需要“每行内等高”还是“所有列全局等高”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
