min-width

Values

<length>

Specifies a fixed minimum computed width. See the <length> entry for a list of possible values.

<percentage>

The <percentage> is calculated with respect to the width of the containing block. If the containing block’s width is negative, the used value is zero. If the containing block’s width depends on this element’s width, then the resulting layout is undefined in CSS 2.1.

See the <percentage> entry for a list of possible values.

inherit

The element inherits its minimum width value from its parent.

The following experimental keyword values have been introduced in CSS3.

available

Width is equal to the containing block width minus the current element’s margin, border, and padding.

max-content

The intrinsic preferred width. The max-content width is, roughly, the width the content would have if no “soft” line breaks were inserted, i.e., if each paragaph is one long line.

min-content

The intrinsic minimum width. The min-content width is, roughly, the narrowest the box can get by breaking all lines at all possible break points.

The following image helps understand the min-content and max-content values.

More about min-content and max-content:

The min-content value is the narrowest a box can get by breaking all lines at all possible break points. In the above image, we saw how a text-only content can affect the container’s width with min-content. The same concept applies if you have an image inside an element. The element is an inline-element, and therefore a break point is also possible after it. So, if the element contained a piece of text, and an image, the image is more likely to be wider than any word inside the paragraph (unless you’re using some fancy and super long words, of course), so the image can be the content that specifies the minimum width of the element with min-content.

But, since the element can have a width greater than its minimum width, the value of min-width in this case is the same as width

View this demo on the Codrops Playground

Using max-content, the content inside the element will not break at any soft break points, and the text will be rendered as one long line, and the element must stretch to fit the longest line inside it, and that will be the minimum width it can have.

View this demo on the Codrops Playground

fit-content

Same as min-content.

Notes

Negative values are not allowed.

The keyword values (in contrast to length and percentage values) are not influenced by the box-sizing property, they always set the size of the content box.

Available, max-content, min-content and fit-content are equivalent to 0 when set on the min-width of vertical elements (when the writing mode is vertical, i.e. the writing-mode property has a value of vertical-rl or vertical-lr).