min-height 和 max-height 必须配合 overflow 才能形成真正可控的伸缩范围，单独写其中一个或忽略溢出处理，大概率达不到预期效果；否则 min-height 无法兜底、max-height 不触发滚动、flex 子项易被拉伸失效，且父容器约束、定位脱离、单位兼容性等问题均会阻断其生效。
直接结论：min-height 和 max-height 必须配合 overflow 才能形成真正可控的伸缩范围，单独写其中一个或忽略溢出处理，大概率达不到预期效果。
为什么 min-height: 300px 写了却没撑起来？
常见错误现象：DevTools 显示样式已生效，但元素高度还是随内容塌陷，或者父容器“不认账”。
- 父容器设了
height或max-height（比如height: 200px），子元素再想撑也突破不了上限 - 父容器是
display: flex且未改align-items，子项默认被stretch拉满，min-height根本没机会触发 - 子元素用了
position: absolute，它的包含块可能不是视觉上的父级，而是第一个非static祖先——此时min-height只在这个包含块内生效，而该块本身可能高度为 0 - 同时写了
height: 150px和min-height: 300px，虽然浏览器会按min-height执行，但这种写法极易引发后期维护混乱
max-height 配合 overflow 才算真正生效
只写 max-height: 200px 不会自动加滚动条，超出部分默认溢出不可见。必须显式控制溢出行为。
-
overflow-y: auto是最稳妥选择：内容超限时出现滚动条，不超时则无滚动条 - 避免用
overflow: hidden，除非你明确接受内容被截断（比如卡片预览摘要） - 在 flex 容器中，若子项需滚动，父容器最好设
min-height: 0或overflow: hidden，否则 flex 会阻止子项的max-height生效 - 移动端慎用
max-height做动画：浏览器不支持max-height的平滑过渡（从0到auto更不行），得用固定目标值（如max-height: 500px）并搭配transition
组合使用时的典型陷阱
同时设 min-height 和 max-height 看似完美，但几个细节容易翻车：
立即学习“前端免费学习笔记（深入）”；
- 对
<td> 或 <code><th> 直接设 <code>min-height大概率无效，表格单元格有自己的尺寸计算逻辑；应在外层包一层<div> 再设 <li>用 <code>min-height: 100vh做全屏容器，在 iOS Safari（尤其是旧版本）软键盘弹出时，vh不重算，导致底部大片空白；优先用min-height: 100dvh，兼容写法是min-height: 100vh; min-height: 100dvh; - 在 modal 或 sidebar 这类嵌套滚动区域里，如果内部容器设了
min-height但没控overflow，很容易出现双层滚动条（页面滚 + 容器滚），体验极差 -
min-height和max-height都不支持 CSS 动画过渡，想做展开收起效果，必须绕道max-height+ 固定数值 +overflow: hidden
最常被忽略的一点：这两个属性的生效，始终依赖于父容器是否“放行”。它们不是魔法指令，而是约束条件——父容器的高度来源、定位方式、flex 设置，都会直接决定它们能不能起作用。
