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
.
max-width
Try it
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: revert; max-width: revert-layer; 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.
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 | 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 |
---|
CSS Box Sizing Module Level 4 # width-height-keywords |
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 | |
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
|
See also
- The box model,
box-sizing
-
width
,min-width
- The mapped logical properties:
max-inline-size
,max-block-size
© 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/max-width