max-width property

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.

• Initialnone
• Applies toall elements but non-replaced inline elements, table rows, and row groups
• Inheritedno
• Percentagesrefer to the width of the containing block
• Mediavisual
• Computed Valuethe percentage as specified or the absolute length or none
• Animatableyes, 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 orderthe 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

Exanple description.

Exanple description.

Exanple description.

---

Compatibility

Desktop browsers

Mobile browsers