min-width/min-height“不生效”的根本原因是布局上下文冲突：Flex/Grid中子项未设flex-shrink:0或被固定列宽覆盖；百分比height使min-height失参照；它仅约束尺寸而非触发显示逻辑。
min-width 和 min-height 为什么有时“不生效”
常见现象是设了 min-width: 200px，但盒子在父容器窄时还是被压缩到更小。根本原因通常是父容器设置了 display: flex 或 display: grid，且子项没显式设置 flex-shrink: 0 —— 此时 min-width 会被忽略，浏览器优先满足 flex 布局的收缩规则。
解决办法不是加 !important，而是配合布局上下文调整：
- Flex 容器中，给子元素加
flex-shrink: 0（或简写为flex: 0 0 auto） - Grid 容器中，确保该格子的
min-width不被grid-template-columns的固定值覆盖（比如避免用1fr强制均分） - 绝对定位/浮动元素上设
min-width是有效的，但要注意它只限制内容区，不包含 margin
min-width: fit-content 和 min-content 的实际差异
fit-content 和 min-content 都是 CSS 内置关键字，但行为差别明显：前者等价于 min(max-content, max(min-content, available-width))，会尝试“撑开但不超过可用宽度”；后者纯按内容最小固有宽度（比如一行文字不断行时的总宽）。
典型使用场景：
立即学习“前端免费学习笔记（深入）”；
- 下拉菜单宽度随内容自适应但不超出视口 → 用
min-width: fit-content - 表格单元格防止文字挤成一团 →
min-width: min-content可能导致过宽，慎用 - Chrome 支持
fit-content，但旧版 Safari 需要-webkit-fit-content前缀
min-height 在 Flex 容器中容易被“吃掉”的情况
当一个 flex 子项同时设置了 min-height 和 height: 100%，min-height 很可能失效——因为 height: 100% 是相对于父容器高度计算的，而父容器若没有明确高度（比如仅靠内容撑开），百分比高度就退化为 auto，此时 min-height 失去参照基准。
稳妥做法：
- 父容器必须有明确高度（
height: 400px或min-height: 300px） - 优先用
min-height替代height: 100%，除非真需要严格填满 - 在 flex 布局中，
align-items: stretch（默认值）会让子项自动拉伸，此时min-height才真正起作用
响应式中用 min-width 替代媒体查询的边界条件
有人想用 min-width: 768px 直接控制组件显示，但这只是尺寸声明，不会触发显示/隐藏逻辑。它只影响盒模型占位，不等价于 @media (min-width: 768px)。
能用 min-width 简化逻辑的地方有限：
- 按钮内边距随容器变宽自动增大：用
padding-left: max(12px, 5%)（需支持max()函数） - 卡片最小宽度固定，内部文字换行策略变化：结合
white-space: nowrap和min-width控制截断点 - 注意：
min-width不会阻止父容器 overflow，如果父容器设了overflow: hidden，超宽子项仍会被裁剪
真正要响应视口变化，还是得回到媒体查询。min-width 是盒模型守门员，不是逻辑开关。
