max-width property CSS Reference

Definition and Usage

The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.

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

• Initial 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
• Media visual
• Computed Value the percentage as specified or the absolute length or none
• Animatable yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
• Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available

max-width: 3.5em
max-width: 75%
max-width: none
max-width: max-content
max-width: min-content
max-width: fit-content
max-width: fill-available
max-width: inherit

Values

none

The width has no maximum value.

<length>

See <length> for possible units.

<percentage>

Specified as a <percentage> of containing block's width.

max-content

The intrinsic preferred width.

min-content

The intrinsic minimum width.

fill-available

The containing block width minus horizontal margin, border and padding. Some browsers implement an ancient name for this keyword, available.

fit-content

The same as max-content.

Examples

body  { max-width: 40em; }
table { max-width: 75%; }
form  { max-width: none; }

p { background: gold }

Exanple description.

p { background: lightgreen;
    max-width:  intrinsic;         /* Safari/WebKit */
    max-width:  -moz-max-content;  /* Firefox/Gecko */
  }

Exanple description.

p { background: lightblue;  max-width: -moz-min-content; }

Exanple description.

Compatibility

Desktop browsers

Mobile browsers