CSS max-width property

Description

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

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

noneDefault: No limit of width is applied to an element.; max-width: none;
Try it
min-content: min-content value specifies the largest minimum width of some descendant item.; max-width: min-content;
Try it
max-content: max-content value represents the largest maximum width of some descendant item.; max-width: max-content;
Try it
+ve length 30: 30px value specifies the maximum width of the element.; max-width: 30px;
Try it
+ve percentage 30: 30% means the width of current box can not exceed 30% of the parent box.; max-width: 30%;
Try it
auto: auto value means the width will be changed automatically according to the content.; max-width: auto;
Try it

It applies to all elements

Code

CSS

.parent{
width:150px;
height:150px;
border:1px solid black;
overflow:auto;
}

.child{
min-width:100px;
max-width:150px;	
}

HTML

<div class="parent">
<div class="child">
<p>This is the first child element.</p>
<p>This is the second child element.</p>
</div>
</div>