CSS max-inline-size property

Property values

noneDefault

No limit of inline-size is applied to an element.

max-inline-size: none;

Try it { }

min-content

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

The inline-size of the current element will be equal to the descendant element that has smallest inline-size.

max-inline-size: min-content;

Try it { }

max-content

max-content value represents that the largest maximum inline-size of some descendant item.

The inline-size of the current element will be equal to the descendant element that has largest inline-size.

max-inline-size: max-content;

Try it { }

length

30

length value specifies the maximum inline-size of the element.

30px value means the inline-size of an element can't exceed 30px no matter how much content is inside this element.

max-inline-size: 30px;

Try it { }

percentage

30

percentage value means the inline-size of current box can not exceed the percentage value of the parent box.

30% value means the inline-size of element must not be greater than 30% inline-size of the parent element.

max-inline-size: 30%;

Try it { }

auto

auto value means the inline-size will be changed automatically according to the content.

max-inline-size: auto;

Try it { }