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 element's width is set to the value of min-width
whenever min-width
is larger than max-width
or 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; min-width: fill-available; /* Global values */ min-width: inherit; min-width: initial; min-width: unset;
<length>
<length>
. Negative values make the declaration invalid.<percentage>
<percentage>
of the containing block's width. Negative values make the declaration invalid.auto
max-content
min-content
fill-available
available
.)fit-content
min(max-content, max(min-content, fill-available))
.<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available
table { min-width: 75%; } form { min-width: 0; }
Specification | Status | Comment |
---|---|---|
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'min-width' in that specification. | Working Draft | Adds the max-content , min-content , fit-content , and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
|
CSS Flexible Box Layout Module The definition of 'min-width' in that specification. | Candidate Recommendation | Adds the auto keyword and uses it as the initial value. |
CSS Transitions The definition of 'min-width' in that specification. | Working Draft | Defines min-width as animatable. |
CSS Level 2 (Revision 1) The definition of 'min-width' in that specification. | Recommendation | Initial 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 |
Media | visual |
Computed value | the percentage as specified or the absolute length |
Animation type | a length, percentage or calc(); |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1
|
7 | 4
|
2 |
fit-content , max-content , and min-content
|
24
|
No | 3
|
No | No | No |
stretch
|
22
|
No | No | No | No | No |
auto |
21
|
12
|
34
|
No | 12.1
|
No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | ? | ? | ? | ? |
fit-content , max-content , and min-content
|
? | ? | No | ? | ? | ? | ? |
stretch
|
37
|
25
|
No | ? | ? | ? | ? |
auto |
? | ? | ? | ? | ? | ? | ? |
width
, max-width
box-sizing
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/min-width