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
.
Try it
Syntax
css
/* <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
max-width =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<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
html
<div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
CSS
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
BCD tables only load in the browser
See also
- The box model,
box-sizing
width
,min-width
- The mapped logical properties:
max-inline-size
,max-block-size