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
.
min-width
Try it
Syntax
/* <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;
Values
-
<length>
-
Defines the
min-width
as an absolute value. -
<percentage>
-
Defines the
min-width
as a percentage of the containing block's width. -
auto
-
The browser will calculate and select a
min-width
for the specified element. -
max-content
-
The intrinsic preferred
min-width
. -
min-content
-
The 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))
.
Formal definition
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(); |
Formal syntax
auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)where
<length-percentage> = <length> | <percentage>
Examples
Setting minimum element width
table { min-width: 75%; } form { min-width: 0; }
Specifications
Specification |
---|
CSS Box Sizing Module Level 3 # min-size-properties |
Browser compatibility
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
≤37
≤37-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
|
See also
-
width
,max-width
- The box model,
box-sizing
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/min-width