Revision Content

{{ CSSRef() }}

Summary

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

The value of min-width overrides both {{ Cssxref("max-width") }} and {{ Cssxref("width") }}.

Syntax

Values

On a flex item, this keyword indicates a minimum size of the min-content size; on all other items, it resolves to 0.

<length>

See {{ Xref_csslength() }} for possible units. Negative values make the declaration invalid.

<percentage>

Specified as a {{ Xref_csspercentage() }} of containing block's width. Negative values make the declaration invalid.

max-content {{ experimental_inline() }}

The intrinsic preferred width.

min-content {{ experimental_inline() }}

The intrinsic minimum width.

available or fill-available{{ experimental_inline() }}

The containing block width minus horizontal margin, border and padding. Two experimental specs, CSS3 Box and CSS3 Writing Modes, have a different name for this value. It is yet unclear which name will be selected in fine. Meanwhile, only prefixed version should be used.

fit-content {{ experimental_inline() }}

According CSS3 Box, this is a synonym of min-content. CSS3 Writing Modes defines a more complex algorithm, but no browser implements it, even in an experimental way.

Examples

table { min-width: 75%; }
form { min-width: 0; }

Specifications

Adds the max-content, min-content, fit-content, and fill-available keywords.It still is unclear which one of the two competing definition, the one of CSS3 Box or the one of CSS3 Writing Modes, will be selected.

{{ SpecName('CSS3 Box', '#min-max', 'min-width') }}

{{ Spec2('CSS3 Box') }}

Adds the max-content, min-content, fit-content, and available keywords.It still is unclear which one of the two competing definition, the one of CSS3 Box or the one of CSS3 Writing Modes, will be selected.

Notes

[1] CSS 2.1 explicitely leaves the behavior of min-width with {{ HTMLElement("table") }} undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now.

[2] Gecko experimentally implements the definitions given in CSS3 Basic Box. This one defines available and not fill-available. Also the definition of fit-content is simpler than in CSS3 Writing Modes.