CSS max-inline-size Property
Description
The max-inline-size
CSS property defines the maximum width or height of an element, depending on its writing mode. It is a logical property, meaning that it responds to changes in the writing mode of the element. This is in contrast to the max-width and max-height properties, which are physical properties and do not respond to changes in writing mode. The max-inline-size
property is useful for creating layouts that are responsive to different writing modes, such as horizontal writing mode for Latin languages and vertical writing mode for Asian languages. It is also useful for creating layouts that are responsive to different screen sizes and devices.
- Initial value
- none
- Applies to
- same as width and height
- Inherited
- no
- Computed value
- same as width and height
- Animatable
- a length, percentage or calc();
- JavaScript syntax
- object.style.maxInlineSize
Interactive Demo
Syntax
max-inline-size: <max-width>
Values
- <max-width>Defines the max-block-size as an value or percentage.
Example
<p class="exampleText">Example text</p>
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 100%;
max-inline-size: 200px;
}
Browser Support
The following table will show you the current browser support for the CSS max-inline-size
property.
Desktop | |||||
79 | 57 | 41 | 44 | 12.2 |
Tablets / Mobile | |||||
57 | 41 | 43 | 12.2 | 7 | 57 |
Last updated by CSSPortal on: 2nd January 2024