min-height无效通常因盒模型或布局限制导致，需检查display类型、父容器塌陷、Flex对齐覆盖、CSS优先级及是否脱离文档流。

设置 min-height 无效，大概率不是写错了属性，而是元素的盒模型行为或上下文限制让它“没机会生效”。关键要确认：这个高度约束是否真的被浏览器计算并参与了布局。

检查元素是否处于「无高度依赖」的布局环境中

某些布局模式会让 min-height 失效或被忽略：

• 浮动元素（float）：浮动后脱离文档流，父容器可能塌陷，导致 min-height 看似无效——实际是父容器没高度，子元素再设也撑不开视觉区域。解决：给父容器触发 BFC（如加 overflow: hidden）或清除浮动。
• 绝对定位（position: absolute）：完全脱离文档流，min-height 仍存在，但不影响其他元素，也不受父容器尺寸约束。若想它撑开父级，需改用相对定位或 Flex/Grid 布局。
• Flex 子项默认不响应 min-height：在 Flex 容器中，子项的 min-height 默认被 align-items: stretch 覆盖。需显式设置 align-self: flex-start 或关闭拉伸（align-items: flex-start）才能让 min-height 生效。

确认 height 和 min-height 没被更高优先级规则覆盖

用浏览器开发者工具（F12）检查该元素的「Computed」面板，看 min-height 是否显示为有效值（非 auto 或被划掉）。常见干扰：

• 父元素设置了 height 且值小于你设的 min-height，而子元素又处于「高度继承/约束」环境（如表格单元格、某些 inline 元素）；
• CSS 优先级冲突：比如内联样式、!important、更具体的选择器覆盖了你的 min-height；
• 使用了 height: fit-content 或 height: max-content 等新特性，它们可能与 min-height 协同异常，建议先统一用 height: auto 测试基准行为。

验证元素是否具有「可渲染的高度空间」

min-height 不会强制创建空间，它只在内容不足时兜底。如果元素：

立即学习“前端免费学习笔记（深入）”；

• 是 display: inline（如 span），min-height 无效——必须设为 inline-block、block 或 flex 等块级/格式化上下文容器；
• 内部为空且没有 padding/border，又未设置 line-height 或伪元素占位，浏览器可能将其渲染为「零高度」，此时 min-height 才真正起作用——但需确保它不是被父级压缩到不可见（例如父级 overflow: hidden 且高度为 0）；
• 受 CSS 重置影响（如某些 UI 库将 body 或 html 设为 height: 100%），导致整条链路高度受限，此时需向上逐层检查 html → body → wrapper 是否都放开了高度约束。

快速自检清单

遇到 min-height 不生效，按顺序排查：

• 元素 display 是否为 block / flex / grid / inline-block；
• 父容器是否塌陷（高度为 0）或设置了固定 height 且过小；
• 是否处于 Flex/Grid 容器中，且对齐方式压制了最小高度；
• 开发者工具中「Computed」里 min-height 是否生效、是否被覆盖；
• 尝试临时加 background: red 和 padding: 20px，看是否有视觉反馈——排除透明/空内容误导。