max-inline-size

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 value0
Applies tosame as width and height
Inheritedno
Percentagesinline-size of containing block
Mediavisual
Computed valuesame as max-width and max-height
Animation typediscrete
Canonical orderthe 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

Document Tags and Contributors

 Contributors to this page: Sheppy, chrisdavidmills, teoli, Sebastianz, fscholz, kscarfone
 Last updated by: Sheppy,