min-width 不改变盒模型类型但影响渲染尺寸，其限制基准由 box-sizing 决定：content-box 限内容宽，border-box 限总宽；在 flex/grid 中常因默认 min-width: auto 失效；与 width、max-width 共存时取三者交集，min-width 优先级最高。
min-width 不会改变盒模型类型，但会影响最终渲染尺寸
min-width 是一个尺寸限制属性，它不修改 box-sizing，也不切换 display 类型，因此不会让 block 变成 inline，也不会把 content-box 强制转为 border-box。它的作用很单纯：当元素计算出的宽度小于指定值时，强制拉宽到该最小值。是否生效，取决于当前布局上下文和父容器约束。
min-width 在不同 box-sizing 下的行为差异
虽然 min-width 本身不改盒模型，但它作用的“宽度”基准由 box-sizing 决定：
- 当
box-sizing: content-box（默认）时，min-width限制的是 内容区宽度，边框和内边距会额外撑大总占用空间 - 当
box-sizing: border-box时，min-width限制的是 整个盒子的总宽度（含 padding + border），内容区会自动收缩腾出空间
这意味着相同 min-width: 200px 在两种模式下，实际内容可显示宽度可能差出几十像素——尤其在 padding 较大时容易误判布局溢出原因。
flex / grid 容器中 min-width 的常见失效场景
在弹性布局里，min-width 很容易被忽略或“不起作用”，不是 bug，而是 flex 项默认行为导致的：
立即学习“前端免费学习笔记（深入）”；
- flex 项默认有
min-width: auto（不是0），这会阻止它压缩到比内容更窄——此时显式设min-width: 0才能真正释放压缩能力 - 如果父容器是
display: flex且子项没设flex-shrink: 1，即使内容很短，min-width也可能被忽略，因为 flex 项优先按主轴剩余空间分配 - grid 中类似，
min-width对grid-template-columns: auto列有效，但对minmax(0, 1fr)这类函数里的0起决定性作用
典型表现是：文字没换行、图片溢出、滚动条意外出现——排查时先看父容器是否是 flex/grid，再检查子项的 min-width 和 min-height 是否被隐式覆盖。
与 width、max-width 组合使用的边界情况
三者共存时，浏览器按「约束优先级」求交集，不是简单覆盖：
div {
width: 100px;
min-width: 150px;
max-width: 120px;
}
这段代码最终宽度是 120px？错。实际结果是 150px，因为 min-width > max-width 时，min-width 优先生效（规范要求取交集，交集为空则以 min-width 为准）。更隐蔽的问题是：
-
width: 80%+min-width: 300px：百分比基于父容器计算，若父宽 -
width: fit-content+min-width：fit-content本身已含内在最小约束，叠加min-width可能冗余，但若内容极短（如空格），min-width仍会兜底
真正容易被忽略的，是响应式断点中用 min-width 做媒体查询条件时，和元素自身 min-width 同名造成的语义混淆——前者是视口限制，后者是盒尺寸限制，二者完全无关，但名字一样，调试时得盯紧上下文。
