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.

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.

auto

The browser will calculate and select a max-width for the specified element.

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

Formal syntax

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

#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

Specifications

Browser compatibility

See also

• The box model, box-sizing
• width, min-width