根本原因在于绝对定位元素缺乏水平尺寸计算依据，min-width需依赖left/right或width等显式约束才能生效；仅设min-width时浏览器按内容收缩，属性被忽略。
为什么 min-width 在 position: absolute 元素上经常失效
根本原因不是属性写错了，而是浏览器没拿到“宽度计算依据”——min-width 需要一个明确的水平尺寸上下文才能生效。如果只写 position: absolute; min-width: 300px;，元素仍按内容收缩（shrink-to-fit），min-width 被忽略。
必须显式参与宽度计算：要么设 left 和 right，要么设 width（含百分比），否则 min-width 就是摆设。
-
left: 0; right: 0; min-width: 300px;→ 宽度先由左右间距决定，再受min-width约束 -
width: 100%; min-width: 300px;→ 前提是父容器已定位（如position: relative），否则 100% 参照视口 -
left: 20px; width: auto; min-width: 300px;→ 此时宽度 = 内容宽度，但不低于 300px
max-width 在 fixed 元素中不生效的典型场景
position: fixed 元素默认以视口为参考系，但 max-width 不会自动限制其渲染宽度——尤其当它只设了 top 和 left，却没管右边边界时。
错误写法：position: fixed; top: 10px; left: 10px; max-width: 600px; → 浏览器认为宽度由 left + width 决定，而 width 是 auto，所以 max-width 不触发。
- 有效写法：
position: fixed; top: 10px; left: 10px; right: 10px; max-width: 600px;→ 先按左右间距算出可用宽度，再用max-width截断 - 若
right为auto（即未声明），max-width很可能被跳过 - 搭配
inset: 10px;更简洁（现代浏览器支持），但需注意兼容性 fallback
同时使用 min-width 和 max-width 的冲突与优先级
这两个属性本身不互斥，但和 width 混用时极易翻车。CSS 渲染时，width 是目标值，min-width/max-width 是约束条件；一旦 width 值落在二者之外，就会被覆盖或压制。
-
width: 500px; max-width: 400px;→ 实际宽度是 500px，max-width形同虚设 -
min-width: 500px; max-width: 400px;→ 浏览器取min-width（500px），但这是逻辑矛盾，应提前校验 - 推荐组合：
width: auto; min-width: 300px; max-width: 800px;→ 让宽度自然流动，再加双限
高度方向的 min-height/max-height 同样依赖定位约束
和宽度一样，min-height 在绝对定位元素上不会自动生效。关键仍是“有没有提供垂直尺寸上下文”。
常见有效路径：
-
top: 0; bottom: 0; min-height: 200px;→ 高度先由上下间距撑开，再受最小高度限制 -
height: 100%; min-height: 200px;→ 要求父容器有明确高度且已定位 -
top: 20px; height: auto; min-height: 200px;→ 内容撑高，但不低于 200px
注意：top 和 bottom 同时存在时，height 属性会被忽略；此时 min-height 才真正起作用 —— 这点容易被忽略，也是调试时最常卡住的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
