答案：直接给父容器设display:flex即可实现两栏自动等高，前提是父容器有可计算高度且子项未设置height/min-height/align-self等干扰属性。
直接给父容器设 display: flex，两栏就自动等高——前提是没人为破坏这个行为。
父容器必须是 display: flex
这是所有等高的前提。如果只是子元素加了 flex 类，但父容器仍是 block 或 inline，align-items: stretch 根本不生效。
- 确保外层容器明确写了
display: flex（不是inline-flex，除非你真需要内联行为） - 别漏掉
flex-direction: row—— 虽然它是默认值，但在某些重置样式或框架里可能被覆盖 - 避免同时设
flex-direction: column，否则stretch作用在宽度上，跟“等高”无关 - 父容器要有可计算的高度基准：比如
min-height: 100vh、height: 100%（需祖先有高度），或由内容自然撑开
子项不能主动“拒绝拉伸”
align-items: stretch 是 flex 默认值，但它会被子项自己的样式覆盖。只要子项没显式“放弃”，高度就同步。
- 删掉子项上的
height、max-height、min-height—— 它们会锁死高度，让 stretch 失效 - 检查有没有
align-self: flex-start、align-self: center等声明，它们优先级高于父容器的align-items - 图片、iframe 等替换元素有时按 baseline 对齐，加一句
align-self: stretch强制拉伸更稳 - Tailwind 用户注意：
h-full、min-h-0这类类名会干扰 stretch，慎用
内容太少时视觉上还是“不等高”怎么办
stretch 生效了，但某栏只有标题或空 div，看起来还是塌陷——这不是 bug，是行为正常。需要辅助撑开。
- 给内容少的栏加
padding-bottom，比如pb-8，制造视觉平衡 - 用
::after伪元素 +flex: 1占满剩余空间，适合底部对齐场景 - 避免用
height: 100%去“模拟”拉伸——它依赖父容器有明确高度，且容易在嵌套中失效 - 如果父容器高度来自内容（比如没设
min-height），而两栏都极短，那 stretch 拉的只是“包裹内容的高度”，此时加min-height: 200px更直接
真正容易被忽略的是：父容器高度来源和子项的 min-height 冲突。比如父容器靠内容撑高，但某个子项写了 min-height: 400px，它就会把整个容器顶高，另一栏跟着拉——这看似“等高”，实则是被单边拖高的假象。要验证是否真同步，得看最短内容那一栏是否也被拉到了最长内容的高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
