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
是否适用于 CSS 动画	yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
正规顺序	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	初始定义。

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。