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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 7.0 4.0 2.0.2 (416),
buggy before
applies to <table> Not supported (Yes) Not supported (Yes) Not supported
max-content, min-content, fit-content, and fill-available Not supported 3.0 (1.9)-moz Not supported Not supported Not supported

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA NA NA NA NA

Relative articles