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
heightandwidth - Inherited: no
- Percentages: as for the corresponding physical property
- Computed value: same as
heightandwidth - 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:
