CSS max-inline-size Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

This is a box where you can change the max-inline-size.

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
Edge Chrome Firefox Opera Safari
7957414412.2
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
57414312.2757

Last updated by CSSPortal on: 2nd January 2024