min-width property

Definition and Usage

The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

The value of min-width overrides both max-width and width.

• Initial0
• 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
• 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> | max-content | min-content | fit-content | fill-available

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

---

Values

<length>

The fixed minimum width. See <length> for possible units. Negative values make the declaration invalid.

<percentage>

The fixed minimum width expressed as a <percentage> of containing block’s width. Negative values make the declaration invalid.

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

Defined as min(max-content, max(min-content, fill-available).

---

Examples

---

Compatibility

Desktop browsers

Mobile browsers