min-width/min-height不生效的主因是display类型和flex-shrink默认值；行内元素需设inline-block/block，flex项目需设flex-shrink:0，百分比需父容器有明确宽度。
min-width 和 min-height 不生效？先检查 display 类型
块级元素默认支持 min-width 和 min-height，但行内元素（如 ）不认这两个属性——哪怕你写了也没用。常见踩坑是给 或 直接设 min-width: 200px，结果尺寸还是随内容缩到最小。
解决方法很简单：加 display: inline-block 或 display: block。如果必须保持行内流式布局，inline-block 是更安全的选择。
-
display: inline→min-width/min-height完全忽略 -
display: inline-block→ 正常响应，且不换行 -
display: flex容器子项 → 即使是flex项目，默认也受min-width约束，但要注意flex-shrink: 1可能强行压缩它（见下一条）
Flex 布局里 min-width 被“吃掉”了？关掉 flex-shrink
在 display: flex 容器中，子元素默认有 flex-shrink: 1，意味着当空间不足时，浏览器会优先压缩子项——哪怕你写了 min-width: 120px，它也可能被压到比 120px 还小。
这不是 bug，是 flex 的收缩逻辑在起作用。要真正守住最小尺寸，得显式禁用收缩：
- 加
flex-shrink: 0（推荐） - 或写成
flex: 0 0 auto（等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto） - 别只写
flex: 1，它隐含flex-shrink: 1，会覆盖min-width
示例：.item { min-width: 150px; flex-shrink: 0; }
百分比 min-width 在某些父容器里会失效
min-width: 50% 看似合理，但如果父容器没有明确宽度（比如高度由内容撑开、宽度未设置），这个百分比就无从计算，最终退化为 min-width: 0。
典型场景：绝对定位元素、display: table-cell、或父级是 display: inline-block 且未设宽。此时浏览器无法解析“50% of what?”。
- 解决方案：确保父容器有可计算的宽度（例如
width: 100%、max-width: 600px，或父级是block且有文档流宽度） - 替代思路：改用
min-width: fit-content或min-width: max-content，它们基于内容本身，不依赖父级百分比 - 注意：
fit-content在旧版 Safari 中需加-webkit-前缀
min-height 在 flex 或 grid 容器里表现异常？优先级问题
min-height 在现代布局中容易被误解为“最低高度”，但它实际只在元素自身是块级或弹性/网格项目时才起作用；如果父容器设置了 height 且子项没设 height，min-height 可能被忽略——尤其在 flex-direction: column 下，子项高度由内容决定，min-height 很难触发。
更可靠的做法是结合容器行为判断：
- Flex 列方向容器（
flex-direction: column）：给子项加min-height有效，但若父容器height固定且无溢出，子项仍可能被截断 - Grid 布局：直接在 grid item 上设
min-height是安全的，grid 自身不压缩它 - 避免混合使用：
height: 100px和min-height: 120px同时存在时，height会优先生效，min-height形同虚设
真要保底高度，不如用 min-block-size（逻辑属性），它在不同书写模式下更稳定，不过兼容性略弱于 min-height。
事情说清了就结束。最常漏掉的是 flex-shrink 和 display 类型这两层，默认值会悄悄绕过你的 min-width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
