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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The element's width is set to the value of min-width
whenever min-width
is larger than max-width
or width
.
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: 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(<length-percentage>)where <length-percentage> = <length> | <percentage>
Examples
Setting minimum element width
table { min-width: 75%; } form { min-width: 0; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 4The definition of 'min-width' in that specification. | Editor's Draft | |
CSS Box Sizing Module Level 3The definition of 'min-width' in that specification. | Working Draft | Adds the max-content , min-content , fit-content keywords.
|
CSS Flexible Box Layout ModuleThe definition of 'min-width' in that specification. | Candidate Recommendation | Adds the auto keyword and uses it as the initial value.
|
CSS Level 2 (Revision 1)The definition of 'min-width' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
min-width
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox Full support 1 Full support 1 Notes' CSS 2.1 leaves the behavior of |
IE
Full support 7 |
Opera Full support 4 Full support 4 Notes' CSS 2.1 leaves the behavior of |
Safari
Full support 1 |
WebView Android
Full support 4.4 |
Chrome Android
Full support 18 |
Firefox Android Full support 4 Full support 4 Notes' CSS 2.1 leaves the behavior of |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
auto
|
Chrome Full support 21 Full support 21 Notes' Chrome uses |
Edge Full support 12 Full support 12 Notes' Edge uses |
Firefox Full support 34 Full support 34 No support 16 — 22 Notes' Firefox 18 and later (until the value was removed), used |
IE
No support No |
Opera Full support 12.1 Full support 12.1 Notes' Opera uses |
Safari
No support No |
WebView Android Full support 37 Full support 37 Notes' Chrome uses |
Chrome Android Full support 25 Full support 25 Notes' Chrome uses |
Firefox Android Full support 34 Full support 34 No support 16 — 22 Notes' Firefox 18 and later (until the value was removed), used |
Opera Android Full support 14 Full support 14 Notes' Opera uses |
Safari iOS
No support No |
Samsung Internet Android Full support 1.5 Full support 1.5 Notes' Samsung Internet uses |
fit-content
|
Chrome Full support 46 Full support 46 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 3 Full support 3 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Firefox implements the definitions given in CSS3 Basic Box. This defines |
IE
No support No |
Opera Full support 33 Full support 33 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 11 Full support 11 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android
Full support 46 |
Firefox Android Full support 4 Full support 4 Prefixed' Implemented with the vendor prefix: -moz-
Notes' Firefox implements the definitions given in CSS3 Basic Box. This defines |
Opera Android
Full support 33 |
Safari iOS Full support 11 Full support 11 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 5.0 Full support 5.0 Alternate Name' Uses the non-standard name: |
max-content
|
Chrome Full support 46 Full support 46 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 66 Full support 66 Full support 3 Prefixed' Implemented with the vendor prefix: -moz- |
IE
No support No |
Opera Full support 33 Full support 33 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 11 Full support 11 Full support 2 Alternate Name' Uses the non-standard name: |
WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android
Full support 46 |
Firefox Android Full support 66 Full support 66 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android
Full support 33 |
Safari iOS Full support 11 Full support 11 Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android
Full support 5.0 |
min-content
|
Chrome Full support 46 Full support 46 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- No support 25 — 48 Alternate Name' Uses the non-standard name: |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 66 Full support 66 Full support 3 Prefixed' Implemented with the vendor prefix: -moz- |
IE
No support No |
Opera Full support 33 Full support 33 Full support ≤15 Prefixed' Implemented with the vendor prefix: -webkit- No support ≤15 — 35 Alternate Name' Uses the non-standard name: |
Safari Full support 11 Full support 11 Full support 2 Alternate Name' Uses the non-standard name: |
WebView Android Full support 46 Full support 46 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- No support ≤37 — 48 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 46 Full support 46 Full support 25 Prefixed' Implemented with the vendor prefix: -webkit- No support 25 — 48 Alternate Name' Uses the non-standard name: |
Firefox Android Full support 66 Full support 66 Full support 4 Prefixed' Implemented with the vendor prefix: -moz- |
Opera Android Full support 33 Full support 33 Full support ≤14 Prefixed' Implemented with the vendor prefix: -webkit- No support ≤14 — 35 Alternate Name' Uses the non-standard name: |
Safari iOS Full support 11 Full support 11 Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.5 Prefixed' Implemented with the vendor prefix: -webkit- No support 1.5 — 5.0 Alternate Name' Uses the non-standard name: |
|
Chrome Full support 22 Full support 22 Alternate Name' Uses the non-standard name: |
Edge Full support 79 Full support 79 Alternate Name' Uses the non-standard name: |
Firefox
No support No |
IE
No support No |
Opera Full support 15 Full support 15 Alternate Name' Uses the non-standard name: |
Safari
No support No |
WebView Android Full support 4.4 Full support 4.4 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 25 Full support 25 Alternate Name' Uses the non-standard name: |
Firefox Android
No support No |
Opera Android Full support 14 Full support 14 Alternate Name' Uses the non-standard name: |
Safari iOS
No support No |
Samsung Internet Android Full support 1.5 Full support 1.5 Alternate Name' Uses the non-standard name: |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
- Uses a non-standard name.'
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
width
,max-width
- The box model,
box-sizing
min-width by Mozilla Contributors is licensed under CC-BY-SA 2.5.