min-width

概述

min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。

min-width 的值会同时覆盖 max-width 和 width。

初始值	`0`
适用元素	all elements but non-replaced inline elements, table rows, and row groups
是否是继承属性	否
Percentages	refer to the width of the containing block
适用媒体	visual
计算值	the percentage as specified or the absolute length
Animation type	a length, percentage or calc();
正规顺序	the unique non-ambiguous order defined by the formal grammar

形式语法： <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

min-width: 3.5em
min-width: 10%
min-width: max-content
min-width: min-content
min-width: fit-content
min-width: fill-available

min-width: inherit

<length>: 固定的最小宽度。查看 <length> 了解可用单位。负值会让该声明失效。
<percentage>: 固定的最小宽度表现为包含块宽度的 <percentage> (百分比值)。负值会让该声明失效。
max-content: 固有首选宽度。
min-content: 固有最小宽度
fill-available: 包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字： available。
fit-content: 等同于 min(max-content, max(min-content, fill-available).

table { min-width: 75%; }

form { min-width: 0; }

Specification	Status	Comment
CSS Intrinsic & Extrinsic Sizing Module Level 3 min-width	Working Draft	增加 `max-content`， `min-content`， `fit-content`，和 `fill-available` 关键字。 CSS3 Box 与 CSS3 Writing Modes 两份草案在某种程度上定义了这些关键字。本草案取代了这些草案。
CSS Flexible Box Layout Module min-width	Candidate Recommendation	早期的修订规范增加了 `auto` 关键字并将其作为初始值。然而 CSSWG 随后重置了这一变更。直至2013 年 3月 29日，最新的编辑草案没有对 `min-width` 属性做任何修改(也就是说 `auto 值已经不被推荐`)。
CSS Transitions min-width	Working Draft	定义 `min-width` 为动画属性。
CSS Level 2 (Revision 1) min-width	Recommendation	初始定义。

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.0)	7.0	4.0	2.0.2 (416), buggy before
applies to `<table>` [1]	未实现	(Yes)	未实现	(Yes)	未实现
`max-content`, `min-content`, `fit-content`, and `fill-available`	24.0 -webkit [3]	3.0 (1.9) -moz [2]	未实现	未实现	未实现 [3]
`auto`已废弃 Gecko 22	21.0	16.0 (16.0)	未实现	12.10	未实现
`auto` as initial value已废弃 Gecko 22	21.0	18.0 (18.0)	未实现	12.10	未实现

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?	?

[1] CSS 2.1 对于 min-width 用于 <table> 时的行为未做任何定义。因此任何行为都是符合 CSS2.1 的；新的 CSS 规范可能会定义该行为，因此 Web 开发人员不应该依赖此时的规范。

[2] Gecko 试验性的实现了 CSS3 Basic Box 中给出的定义。该规范定义了 available 而不是 fill-available。同时 fit-content 的定义相比 CSS3 Intrinsic 也进行了简化。

[3] WebKit 也实现了一份早期提案，即关键字 intrinsic。