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 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
.
/* <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: revert; max-width: revert-layer; max-width: unset;
<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))
.
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.
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(); |
max-width =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller.
<div id="parent"> <div id="child"> Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. </div> </div>
#parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }
Specification |
---|
CSS Box Sizing Module Level 4 # width-height-keywords |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
max-width |
1 |
12 |
1
CSS 2.1 leaves the behavior of
max-width with table undefined. Firefox supports applying max-width to table elements. |
7 |
4
CSS 2.1 leaves the behavior of
max-width with table undefined. Opera supports applying max-width to table elements. |
1 |
4.4 |
18 |
4
CSS 2.1 leaves the behavior of
max-width with table undefined. Firefox supports applying max-width to table elements. |
14 |
1 |
1.0 |
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 |
44 |
11
7
2
|
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. |
43 |
11
7
1
|
5.0 |
fit-content_function |
No |
No |
91 |
No |
No |
No |
No |
No |
No |
No |
No |
No |
max-content |
46
22
|
79
79
|
66
3
|
No |
44 |
11
7
2
|
46
≤37
|
46 |
66
4
|
43 |
11
7
1
|
5.0 |
min-content |
46
25
|
79
79
|
66
3
|
No |
44 |
11
7
2
|
46 |
46 |
66
4
|
43 |
11
7
1
|
5.0 |
stretch |
22 |
79 |
No |
No |
15 |
No |
4.4 |
25 |
No |
14 |
No |
1.5 |
box-sizing
width
, min-width
max-inline-size
, max-block-size
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width