The max-width
CSS property sets the maximum width of an element. It prevents the used value of the width
property from becoming larger than the value specified by max-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.
max-width
overrides width
, but min-width
overrides max-width
.
Syntax
/* <length> value */ max-width: 3.5em; /* <percentage> value */ max-width: 75%; /* Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content(20em); /* Global values */ max-width: inherit; max-width: initial; max-width: unset;
Values
<length>
- Defines the
max-width
as an absolute value. <percentage>
- Defines the
max-width
as a percentage of the containing block's width. none
- No limit on the size of the box.
max-content
- The intrinsic preferred
max-width
. min-content
- The intrinsic minimum
max-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))
.
Accessibility concerns
Ensure that elements set with a max-width
are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Formal definition
Initial value | none
|
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 or none
|
Animation type | a length, percentage or calc(); |
Formal syntax
none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage>
Examples
Setting max width in pixels
In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller.
HTML
<div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
CSS
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: 150px;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 4The definition of 'max-width' in that specification. | Editor's Draft | |
CSS Box Sizing Module Level 3The definition of 'max-width' in that specification. | Working Draft | Adds the max-content , min-content , fit-content keywords.
|
CSS Level 2 (Revision 1)The definition of 'max-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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
max-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 |
|
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 Partial support 3 Partial 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 44 |
Safari Full support 11 Full support 11 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- 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 Partial support 4 Partial 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 43 |
Safari iOS Full support 11 Full support 11 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android
Full support 5.0 |
|
Chrome Full support 46 Full support 46 Full support 22 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 44 |
Safari Full support 11 Full support 11 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- 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 43 |
Safari iOS Full support 11 Full support 11 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android
Full support 5.0 |
|
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 44 |
Safari Full support 11 Full support 11 Full support 6.1 Prefixed' Implemented with the vendor prefix: -webkit- Full support 2 Alternate Name' Uses the non-standard name: |
WebView Android
Full support 46 |
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 43 |
Safari iOS Full support 11 Full support 11 Full support 7 Prefixed' Implemented with the vendor prefix: -webkit- Full support 1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android
Full support 5.0 |
|
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
- Partial support
- Partial 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
- The box model,
box-sizing
width
,min-width
- The mapped logical properties:
max-inline-size
,max-block-size
max-width by Mozilla Contributors is licensed under CC-BY-SA 2.5.