The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
/* <length> value */ min-width: 3.5em; /* <percentage> value */ min-width: 10%; /* Keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /* Global values */ min-width: inherit; min-width: initial; min-width: revert; min-width: revert-layer; min-width: unset;
<length>Defines the min-width as an absolute value.
<percentage>Defines the min-width as a percentage of the containing block's width.
autoThe browser will calculate and select a min-width for the specified element.
max-contentThe intrinsic preferred min-width.
min-contentThe intrinsic minimum min-width.
fit-content(<length-percentage>)Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).
| Initial value | auto |
|---|---|
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |
min-width =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
table { min-width: 75%; } form { min-width: 0; }
| Specification |
|---|
| CSS Box Sizing Module Level 3 # min-size-properties |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
min-width |
1 |
12 |
1
CSS 2.1 leaves the behavior of
min-width with table undefined. Firefox supports applying min-width to table elements. |
7 |
4
CSS 2.1 leaves the behavior of
min-width with table undefined. Opera supports applying min-width to table elements. |
1 |
4.4 |
18 |
4
CSS 2.1 leaves the behavior of
min-width with table undefined. Firefox supports applying min-width to table elements. |
10.1 |
1 |
1.0 |
auto |
21
Chrome uses
auto as the initial value for min-width. |
12
Edge uses
auto as the initial value for min-width. |
34
16-22
Firefox 18 and later (until the value was removed), used
auto as the initial value for min-width. |
No |
12.1
Opera uses
auto as the initial value for min-width. |
7 |
37
Chrome uses
auto as the initial value for min-width. |
25
Chrome uses
auto as the initial value for min-width. |
34
16-22
Firefox 18 and later (until the value was removed), used
auto as the initial value for min-width. |
14
Opera uses
auto as the initial value for min-width. |
7 |
1.5
Samsung Internet uses
auto as the initial value for min-width. |
fit-content |
46
25
|
79
79
|
3
Firefox implements the definitions given in CSS3 Basic Box. This defines
available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing. |
No |
33
15
|
11
7
|
46
≤37
|
46 |
4
Firefox implements the definitions given in CSS3 Basic Box. This defines
available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing. |
33 |
11
7
|
5.0 |
fit-content_function |
No |
No |
91 |
No |
No |
No |
No |
No |
No |
No |
No |
No |
max-content |
46
25
|
79
79
|
66
3
|
No |
33
15
|
11
2
|
46
≤37
|
46 |
66
4
|
33 |
11
1
|
5.0 |
min-content |
46
25
25-48
|
79
79
|
66
3
|
No |
33
≤15
≤15-35
|
11
2
|
46
4.4
4.4-48
|
46
25
25-48
|
66
4
|
33
≤14
≤14-35
|
11
1
|
5.0
1.5
1.5-5.0
|
stretch |
22 |
79 |
No |
No |
15 |
No |
4.4 |
25 |
No |
14 |
No |
1.5 |
width, max-width
box-sizing