Flex布局可让左右栏自动等高——父容器设display: flex，子项默认align-items: stretch拉伸对齐；无需JS或固定高度，响应式时用@media改flex-direction为column即可堆叠。
用 Flex 布局让左右栏自动等高，是最简洁可靠的解法——父容器设 display: flex，子栏目默认就拉伸对齐，无需 JS 或固定高度。
父容器启用 Flex 布局
把左右栏的直接父元素（比如 .container）设为 flex 容器：
-
display: flex—— 启用弹性布局 -
flex-direction: row（默认可省略）—— 水平排列左右栏 -
align-items: stretch（默认值，可不写）—— 子项自动填满交叉轴（即高度方向）
左右栏不设固定高度，也不用 min-height
只要不写 height、max-height 或 flex: 0 0 auto 这类限制拉伸的属性，左右栏就会自然撑开到父容器最高子项的高度。
- 左侧内容多？右侧自动跟高
- 右侧加了大图或长列表？左侧也同步拉齐
- 避免用
min-height: 100vh强撑，它只保底，不联动
响应式下想变单列？加个媒体查询就行
小屏幕时让左右栏堆叠，只需在断点处改 flex 方向：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) { .container { flex-direction: column; } }- 此时左右栏恢复“谁内容多谁高”，符合移动端阅读习惯
- 不需要额外 JS 或重写结构
基本上就这些。Flex 的 stretch 行为是浏览器原生支持的，兼容性好（IE10+），代码干净，维护成本低。
