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

max-width overrides width, but min-width overrides max-width.

Syntax

css

/* <length> value */
max-width: 3.5em;
max-width: anchor-size(--myAnchor 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);

/* 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: Use the available space, but not more than max-content, i.e min(max-content, max(min-content, stretch)).
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
CSS Box Sizing Module Level 4 # sizing-values

Browser compatibility

BCD tables only load in the browser