Themax-widthCSS property sets the maximum width of an element. It prevents theused value of thewidth property from becoming larger than the value specified bymax-width.

Try it

max-width: 150px;

max-width: 20em;

max-width: 75%;

max-width: 20ch;

<section>  <div>    Change the maximum width.  </div></section>

#example-element {  display: flex;  flex-direction: column;  background-color: #5b6dcd;  height: 80%;  justify-content: center;  color: white;}

max-width overrideswidth, butmin-width overridesmax-width.

Syntax

/* <length> value */max-width: 3.5em;max-width: anchor-size(--my-anchor inline, 245px);max-width: calc(anchor-size(width) + 4em);/* <percentage> value */max-width: 75%;/* Keyword values */max-width: none;max-width: max-content;max-width: min-content;max-width: fit-content;max-width: fit-content(20em);max-width: stretch;/* Global values */max-width: inherit;max-width: initial;max-width: revert;max-width: revert-layer;max-width: unset;

Values

<length>

Defines themax-width as an absolute value.

<percentage>

Defines themax-width as a percentage of the containing block's width.

none

No limit on the size of the box.

max-content

The intrinsic preferredmax-width.

min-content

The intrinsic minimummax-width.

fit-content

Use the available space, but not more thanmax-content, i.e.,min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Uses thefit-content formula with the available space replaced by the specified argument, i.e.,min(max-content, max(min-content, argument)).

stretch

Limits the maximum width of the element'smargin box to the width of itscontaining block. It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to100% but applying the resulting size to the margin box rather than the box determined bybox-sizing.

Note:To check aliases used by browsers for thestretch value and its implementation status, see theBrowser compatibility section.

Accessibility

Ensure that elements set with amax-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

Formal syntax

max-width =
none|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

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>  <div>    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

Browser compatibility

See also

• min-width
• width
• max-inline-size
• max-block-size
• box-sizing
• Introduction to the CSS box model guide
• CSS box model module