This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The max-inline-size
CSS property defines the horizontal or vertical maximum size of an element's block depending on its writing mode. It corresponds to the max-width
or the max-height
property depending on the value defined for writing-mode
. If the writing mode is vertically oriented, the value of max-inline-size
relates to the maximal height of the element, otherwise it relates to the maximal width of the element. It relates to max-block-size
, which defines the other dimension of the element.
/* <length> values */ max-inline-size: 300px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /* Keyword values */ max-inline-size: none; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content; max-inline-size: fill-available; /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;
Initial value | 0 |
---|---|
Applies to | same as width and height |
Inherited | no |
Percentages | inline-size of containing block |
Media | visual |
Computed value | same as max-width and max-height |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
The max-inline-size
property takes the same values as the max-width
and max-height
properties.
Formal syntax
<'max-width'>
Example
HTML Content
<p class="exampleText">Example text</p>
CSS Content
.exampleText { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; }
Specification
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'max-inline-size' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes) -webkit- | No support | 41.0 (41.0)[1] | No support | (Yes) -webkit- | 10.1 -webkit- |
Feature | Android WebView | Chrome for Android | Edge for Android | Firefox Mobile (Gecko) | IE Phone | Opera Android | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 4.4 -webkit- | 61 -webkit- | No support | 41.0 (41.0)[1] | No support | ? | 10.2 -webkit- |
[1] Implemented in Firefox 38 but disabled by default behind the preference layout.css.vertical-text.enabled
. Enabled by default in Firefox 41. The preference was removed in Firefox 51, and this property can no longer be disabled.
See also
- The mapped physical properties:
max-width
andmax-height
writing-mode