min-width 和 max-width 仅对 block、inline-block、flex、grid 元素生效，inline 元素（如 、）忽略；flex 子项需配合 flex-basis 才使百分比生效；子元素（如图片、表格）可能撑破限制，需额外样式约束。
min-width 和 max-width 怎么写才生效
它们只对 display 为 block、inline-block、flex、grid 的元素起作用，inline 元素（比如 <span></span>）直接忽略这两个属性。
常见错误是给一个默认 inline 的标签（如 <a></a> 或 <em></em>）设了 min-width 却没反应——不是写错了，是它根本不支持。
- 解决办法：加
display: inline-block或display: block - Flex 容器里的子项默认受控于
min-width: auto（浏览器自动设的），想让它收缩到内容宽度以下？得显式写min-width: 0 -
max-width遇到浮动或绝对定位元素时可能被绕过，优先检查父容器是否形成 BFC（比如加overflow: hidden）
min-width: fit-content 是什么，能替代 width 吗
fit-content 是一个关键词值，让盒子宽度“尽量贴内容，但不超过 max-width 或容器可用空间”。但它不是万能的，尤其在老浏览器里不兼容。
Chrome 119+、Firefox 120+ 支持完整语法，但 Safari 目前只支持 -webkit-fit-content，且仅限于 width/height，不支持 min-width。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
min-width: max-content（内容最长行宽度）或min-width: min-content（单字符宽度），兼容性更好 - 别用
min-width: fit-content做响应式断点依据——它依赖渲染后的内容尺寸，JS 读取时可能还没计算完 - 和
width: fit-content不同，min-width: fit-content不会让盒子主动“撑开”，只是设了个下限
百分比 min/max-width 在 flex 布局里为什么失效
在 display: flex 容器中，子项的 min-width 和 max-width 默认按主轴方向（通常是水平）计算，但百分比值是相对于父容器宽度的——而 flex 子项的宽度基准，在未设置 flex-basis 时是内容宽度，不是父容器。
结果就是：min-width: 50% 可能算出来是 0，因为“50% of undefined”被当成 0 处理。
- 必须配合
flex-basis: 0或flex-basis: auto显式定义基准 - 更稳妥的是用
flex: 0 1 50%（即flex-grow: 0,flex-shrink: 1,flex-basis: 50%），再叠加min-width和max-width - 注意：Safari 对
flex-basis: 0%解析有 bug，建议统一用flex-basis: 0+ 百分比min/max-width
max-width 被图片或表格撑破怎么办
这是最常被忽略的一点：max-width 约束的是盒子本身，但盒子里的子元素（尤其是 <img alt="CSS如何设置盒子的最小与最大尺寸_利用min/max-width约束盒模型" >、<table>、<code><pre class="brush:php;toolbar:false;"></pre>）可能自带固有尺寸，会强行突破父级限制。
典型错误现象：设置了 max-width: 400px 的卡片，里面一张大图还是把卡片撑宽了。
- 图片要加
img { max-width: 100%; height: auto; }，否则它按原始像素渲染 - 表格加
table { table-layout: fixed; width: 100%; }，不然单元格内容会撑开整表 -
<pre class="brush:php;toolbar:false;"></pre>里长代码行要用white-space: pre-wrap; word-break: break-word;，否则max-width形同虚设
真正麻烦的从来不是写上 min-width 或 max-width，而是你得时刻想着：这个值到底以谁为参照？它的子元素有没有偷偷扛着原始尺寸往外顶？
