CSS max-width property


CSS max-width specifies the maximum width of an element.

If the content overflows the width, it adds a scrollbar to the element.


max-width : none | min-content | max-content | +ve length | +ver percentage | auto

Property values


No limit of width is applied to an element.

max-width: none;


min-content value specifies the largest minimum width of some descendant item.

max-width: min-content;


max-content value represents the largest maximum width of some descendant item.

max-width: max-content;

+ve length

30px value specifies the maximum width of the element.

max-width: 30px;

+ve percentage

30% means the width of current box can not exceed 30% of the parent box.

max-width: 30%;


auto value means the width will be changed automatically according to the content.

max-width: auto;

Applicable to

It applies to all elements

#CSS digger
Was this article helpful?


This is the first child element.

This is the second child element.