Flex子元素默认等高，因父容器display: flex触发align-items: stretch默认拉伸；失效主因是父容器无明确高度、子项设height/min-height/align-self或替换元素未处理对齐。
Flex容器设display: flex就自动等高
只要父容器用了display: flex，子元素默认就等高——不是“能实现”，而是它本来就会这样。根本原因在于 Flex 容器的align-items默认值就是stretch，子元素在交叉轴（垂直方向）上会自动拉伸填满容器高度。
常见错误是给子元素加了height、min-height或align-self: flex-start，这些都会覆盖默认拉伸行为。
- 父容器必须直接包裹子元素，中间不能插一层没设
display: flex的 wrapper - 别用
height: 100%去“辅助”等高——它依赖父级有明确高度，而 Flex 容器高度常来自内容，结果往往是height: 0 - 如果父容器本身写了
height: 200px这类固定值，子元素仍会等高，但被压到 200px；若想随内容撑高，就别写固定height，改用min-height
子元素高度不一致？先检查这几个地方
视觉上“不等高”，大概率不是 Flex 失效，而是某些样式悄悄干扰了stretch行为。
-
img没设height: 100%+object-fit: cover：图片会撑开自身容器，导致该列变高 - 子元素用了
flex: none或flex: 0 0 auto：相当于关掉了拉伸能力 - 写了
margin或padding但没统一box-sizing: border-box：边距参与高度计算，造成视觉错位 - 嵌套了另一个 Flex/Grid 容器，且内层没设
min-height: 0：Grid 子项或 Flex 子项内部再 flex 时，可能因默认min-height: auto塌缩，连带外层等高失效
侧边栏+主内容这种布局怎么稳住等高
左右结构里，侧边栏宽度固定、主内容自适应，同时还要等高——关键不在“怎么拉”，而在“怎么不压、不缩、不溢出”。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏用
flex: 0 0 240px，比width: 240px更安全：明确禁止缩放（flex-shrink: 0），避免内容挤压变形 - 主内容用
flex: 1，别用flex: 1 1 auto：后者在内容增多时可能主动收缩，破坏等高逻辑 - 主内容区如果含长文本或未换行 URL，容易把整行撑宽甚至溢出，加
min-width: 0可强制截断 - 收起侧边栏时，用
display: none才真正退出布局；visibility: hidden或opacity: 0仍在参与等高计算
IE11 或需要兼容老浏览器怎么办
IE10/11 支持display: -ms-flexbox，但行为和现代 Flex 有差异：比如align-items: stretch在某些嵌套场景下不生效，flex: 1对min-height响应不稳定。
如果必须兼容 IE，优先尝试加前缀：
.container {
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
}
真遇到死结（比如子项含 Grid 或复杂嵌套），display: table-cell是最后手段，但它语义错误、响应式差、vertical-align难控，仅建议用于纯静态后台页面。
最易被忽略的是：嵌套层级中任意一层漏了height: 100%（比如html、body没设），min-height: 100vh就失去参照，整个 Flex 链就断了——这不是 Flex 的问题，是高度来源没理清。
