CSS width property

Property values

autoDefault

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

width: auto;

Try it { }

length

300

The width of an element should be at least 30px.

width: 300px;

Try it { }

percentage

30

The width of an element should be 30% of the parent box.

width: 30%;

Try it { }

min-content

min-content value represents that the width of an element must be equal to or greater than the largest minimum width of some descendant item i.e. it depends upon the minimum size of child element.

In this case, the min-width of descendant element is 100px.

width: min-content;

Try it { }

max-content

max-content value means the width of an element must be equal to or greater than the largest maximum width of some descendant item i.e. it depends upon the miximum size of child element.

In this case, the max-width of descendant element is 200px.

width: max-content;

Try it { }