为实现等高布局，需将共同父容器设为 display: flex（IE需加-ms-flexbox前缀），删除子元素height/min-height干扰，必要时设min-height: 0，并通过overflow或flex:1+max-height控制溢出。
旧页面如果没用 Flex，但想实现等高布局（比如多列高度一致），直接加 display: flex 通常就能快速生效，关键是要选对父容器并处理好兼容性和已有样式冲突。
父容器必须设为 flex 容器
找到需要等高的几列的共同父元素（比如 .row 或 .container），给它加上：
display: flex;- （可选）
flex-wrap: wrap;如果子项可能换行
此时所有直系子元素（如 .col-4、.sidebar）默认会拉伸到父容器最大高度——这是 Flex 的默认行为（align-items: stretch）。
注意子元素的 min-height 和 height 干扰
旧代码里常有 height: 100% 或 min-height: 300px 这类声明，可能和 flex 拉伸冲突：
- 删掉子元素上不必要的
height或min-height（flex 拉伸不依赖它们） - 如果内容太少导致高度塌陷，优先用
min-height: 0重置子项的 flex 最小高度限制（尤其当子项内部有 flex 或绝对定位时）
IE10–11 兼容需加前缀（旧项目大概率要支持）
如果目标用户还在用 IE，补上：
display: -ms-flexbox;-ms-flex-align: stretch;
注意：IE 中子元素若设了 float 或 display: inline-block，必须先清除，否则 flex 不生效。
内容溢出或滚动需显式控制
等高后，某列内容特别长，可能把其他列撑高、影响视觉。这时可以：
- 在具体子元素上加
overflow: auto;或overflow-y: auto;实现局部滚动 - 用
flex: 1让某列优先占剩余空间，再配合max-height限制
例如：.main { flex: 1; max-height: 600px; overflow-y: auto; }
