最小宽度属性

最后更新：2026-09-13

min-width 最小宽度属性

min-width 属性用于设置元素的最小宽度，防止元素在容器变窄时被压缩得过小。默认值 0 表示没有最小宽度限制。它常与 width、max-width 配合使用，是响应式布局中保护可读性的重要工具。

分类
初始值	0
继承	否
适用于	non-replaced
可动画	length
CSS 版本	CSS2
状态	标准

📝 语法

min-width: auto | <length> | <percentage> | min-content | max-content | fit-content;

⚙️ 取值

值	类型	描述
`0`	关键字	无最小宽度限制
`<length>`	类型	固定最小宽度
`<percentage>`	类型	相对包含块的百分比

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
min-width	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： min-width 的优先级高于 width 和 max-width，设置后会强制元素不小于该值。

❓ 常见问题

Qmin-width 和 width 同时设置哪个生效？

Amin-width 优先级更高。width 小于 min-width 时按 min-width 渲染；width 大于 min-width 时按 width。min-width 还能覆盖 max-width。CSS 尺寸约束优先级：min-width 优先于 max-width 优先于 width。

QFlex 子项为什么设置 min-width:0 才能收缩？

A因为 flex 子项的 min-width 默认是 auto，相当于内容的最小宽度（如最长单词），容器空间不足时子项也不会被压得更窄，导致溢出或撑破布局。设为 min-width:0 后子项可自由收缩，常用于 flex 布局中的文字截断（text-overflow:ellipsis）和等分列表场景。

Qmin-width 和 max-width 有什么区别？

Amin-width 设置元素宽度的下限，防止元素被压缩得比设定值更窄；max-width 设置上限，防止元素被拉伸得比设定值更宽。两者可同时使用，浏览器按 min-width 优先于 max-width 优先于 width 的规则计算最终宽度，是响应式布局中约束元素宽度区间的两个方向。

Qmin-width 的百分比是相对于谁的？

Amin-width 的百分比相对于包含块的宽度计算。比如 min-width:50% 表示元素宽度不能小于父容器内容区宽度的一半。注意当元素是绝对定位时，百分比参考的是定位祖先的 padding box，使用前最好先确认包含块是哪一个，避免比例计算与预期不符。