Flex子元素max-height未生效的根本原因是父容器高度未定义；它仅限制自身内容高度，不反向约束父容器交叉轴空间，需配合父容器明确高度或Flex嵌套布局才能起作用。
子元素设了max-height却没生效，根本原因在Flex容器高度未定义
Flex子元素的max-height不是“失效”，而是没参照物——它只限制自身内容撑开后的最大高度，但不会反向约束父容器的交叉轴空间分配。当父容器高度是auto（即由内容撑开），子元素即使写了max-height: 200px，只要内容没超，它就按内容自然高度渲染；而一旦父容器有明确高度（比如height: 400px），max-height才真正起作用：超出时触发overflow，否则被拉伸填满。
- 父容器没设
height或min-height→ 子元素max-height仅控制自身内容溢出，不参与Flex拉伸逻辑 - 父容器设了
height: 300px→ 子元素max-height: 200px会截断拉伸，多余空间留白或由overflow处理 - 父容器只设
max-height: 300px→ 多数浏览器下max-height对子元素百分比高度无效，必须配合display: flex才能让子项max-height: 100%可计算
align-items: stretch和max-height冲突时谁赢
align-items: stretch（默认值）会尝试把无显式高度的子元素拉伸到父容器交叉轴可用空间，但这个“拉伸”动作发生在布局计算后期，max-height属于尺寸约束前置条件。所以顺序是：max-height先划红线，stretch再在其内填充。
- 子元素没设
height但写了max-height: 150px→ stretch会把它拉伸到min(父容器高度, 150px) - 子元素同时写了
height: 200px和max-height: 150px→height强制覆盖，max-height被忽略（除非height是auto） - 子元素
display: flex嵌套 +max-height→ 内部flex子项可能因未设min-height: 0保留默认最小高度，导致外部max-height看起来“没压住”
想用max-height实现滚动区域，但Flex容器不给高度怎么办
常见于侧边栏、弹窗内容区等场景：父容器高度由上下文决定（比如flex: 1占剩余空间），但子内容要可滚动且不撑爆。此时不能依赖height: 100%（百分比在max-height父级下无效），得靠Flex嵌套破局。
- 外层容器设
display: flex; flex-direction: column;，确保高度来源可靠 - 滚动区域外再包一层
div，设flex: 1（等价于flex: 1 1 0），让它吃掉所有剩余空间 - 该包裹层内部设
overflow-y: auto，目标内容直接放里面，不用设height或max-height - 避免在滚动层上写
height: 100%——它会试图取父级height，而父级可能只有max-height，结果计算为0
调试时发现max-height像“不存在”，先查这三处
不是CSS写错了，而是Flex布局中高度计算链断裂。打开开发者工具，重点看Computed值，而非Styles面板里的声明。
- 父容器的
height是否为auto？如果是，max-height对子元素百分比值完全无效 - 子元素是否意外继承了
height: 100%（比如来自重置CSS或框架）？这会覆盖max-height的弹性行为 - 子元素
box-sizing是否为border-box？content-box下padding和border会额外增加高度，让max-height提前触发溢出
Flex的高度行为本质是“协商”而非“指令”：max-height是底线，align-items是调度规则，父容器高度才是唯一裁判。漏掉任何一环，视觉效果就会脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
