max-inline-size

max-inline-size is a logical property in CSS that defines the maximum width of an element when the writing-mode is horizontal, or the maximum height of the element when the writing-mode is vertical.

.element {
  max-inline-size: 500px;
  writing-mode: vertical-lr;
}

As you might have guessed by the example above, the writing-mode property changes the orientation of the text and layout flow by 90 degrees.

The main reason to change the orientation, apart from creating fancy designs, is to accommodate internationalization on a site. Many East Asian scripts such as Chinese, Japanese, and Korean can be written horizontally or vertically. Using logical properties, we can provide the correct sizing direction of elements based on the user’s writing mode.

Jen Simmons has an article and presentation that go deeper into CSS writing modes.

Can’t we just use the max-width property?

Yes! But if you aren’t supporting Internet Explorer, there is no reason not to use max-inline-size instead. max-width is a physical dimension, so when the writing mode changes, an element keeps its horizontal width size, breaking a layout when it’s set up to be vertical. Logical properties, like max-inline-size, can respond to those changes and apply the size in the proper orientation.

Syntax

max-inline-size: <'width'>;

• Initial: auto
• Applies to: same as height and width
• Inherited: no
• Percentages: as for the corresponding physical property
• Computed value: same as height and width
• Animation type: by computed value type

Values

/* Length values */
max-inline-size: 250px;
max-inline-size: 5rem;


/* Percentage values */
max-inline-size: 75%;


/* Keyword values */
max-inline-size: auto;
max-inline-size: fit-content(5rem);
max-inline-size: max-content;
max-inline-size: min-content;


/* Global values */
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: unset;

Demo

When the writing-mode is set to vertical-rl, the content will rotate, changing the layout. The width of the max-width box will rotate with the content. But max-inline-size is smart! It leaves its width in tact, regardless of the writing-mode value. Toggle the writing-mode in the following demo to see the difference between the two.

Browser support

IE	Edge	Firefox	Chrome	Safari	Opera
No	79+	41+	57	12.1+	44+

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
85+	79+	81+	12.2+	59+

Note that support for using the following functions may differ from support of the property:

• fit-content()
• max-content()
• min-content()

More information

Related properties