CSS max-inline-size property

Course Recommendation:

max-inline-size Definition and Usage

specifies the maximum size of the element in the inline direction. max-inline-size If the content size in the inline direction is less than the maximum size, then

attribute value has no effect. max-inline-size If the content size in the inline direction is greater than the maximum size, the

Attribute Values.Note: Set the inline direction of the <div> element to vertical-rl: related CSS attributes max-inline-size Defines the inline direction, which affects

attribute results. For English pages, the block direction is downward, and the inline direction is from left to right. max-inline-size CSS max-height attributes relate to CSS attributes max-width and max-inline-size Very similar, but

The attribute depends on the inline direction.

Instance

Example 1

div {
  max-inline-size: 60px;
}

Try It Yourself

Set the maximum size of the <div> element in the inline direction to 60 pixels:

Example 2: Writing Mode Set the inline direction of the <div> element to vertical-rl: writing-mode max-inline-size How the attribute works: when the attribute value is set to vertical-rl, the inline direction changes from horizontal to vertical, which affects

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 3: Max-inline-size vs Inline-size

Observe a <div> element (inline-size set to 100px) and another <div> element (max-inline-size different reactions when the content size changes (set to 100px):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Try It Yourself

CSS Syntax

max-inline-size: auto|length|initial|inherit;

Attribute Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this attribute.

Related Pages

Reference:CSS inline-size attribute

Reference:CSS min-inline-size property

Reference:CSS max-height property

Reference:CSS max-width property

Reference:CSS writing-mode attribute