CSS max-inline-size Property

The max-inline-size property sets the maximum size of an element in the inline direction, which is horizontal in standard layouts and vertical in vertical writing modes.

selector { max-inline-size: value; }

none	The element has no maximum limit on its inline size.
<length>	Sets a fixed maximum size using standard units like px, em, or rem.
<percentage>	Defines the maximum size as a percentage of the containing block's inline size.
max-content	The intrinsic preferred maximum size based on the element's content.
min-content	The intrinsic minimum size based on the element's content.
fit-content()	Uses the available space but limits the size to a specified value or the intrinsic maximum.

Code Examples

A basic example showing a centered container with a maximum logical width of 600px.

<div style="max-inline-size: 600px; background-color: #e0e0e0; margin-inline: auto; padding: 20px;">
  <p>This container will never grow wider than 600px in a horizontal layout, and it stays centered automatically.</p>
</div>

An advanced example using JavaScript to dynamically change the logical size boundary of an element.

<div id="dynamicBox" style="max-inline-size: 300px; border: 2px solid #333333; padding: 10px; transition: max-inline-size 0.5s;">
  <p>Click the button to expand this box using JavaScript.</p>
</div>
<button onclick="expandBox()">Expand Box</button>

<script>
function expandBox() {
  const box = document.getElementById("dynamicBox");
  box.style.maxInlineSize = "800px";
  box.style.backgroundColor = "#f0f0f0";
}
</script>

Pro Tip

Pair max-inline-size with margin-inline: auto to create a container that is perfectly centered and responsive across all languages and writing systems with just two lines of CSS.

Deep Dive

Think of max-inline-size as the logical version of max-width. In a standard English layout, text flows horizontally, so this property limits how wide a box can grow. If you switch to a vertical writing mode, like those used in some East Asian languages, the inline direction flips. Now, max-inline-size limits the height instead. By using logical properties instead of physical ones like width and height, your layout stays smart. It understands that content flow is more important than fixed screen coordinates. It functions exactly like a guardrail on a road; the car can move freely, but it can't go past that specific boundary, regardless of whether the road runs north-south or east-west.

Best Practices

Use max-inline-size instead of max-width when building layouts intended for an international audience. This ensures your design remains intact when users switch between horizontal and vertical reading modes. It is also excellent for keeping text line lengths readable by setting a limit like 60ch or 70ch, preventing lines from stretching too far across large monitors.

Common Pitfalls

The most common mistake is forgetting that this property relies on the writing-mode. If your writing-mode is horizontal, it behaves like max-width. If it is vertical, it behaves like max-height. If you see your layout behaving unexpectedly, double-check your writing-mode and direction settings.

Accessibility

Setting a max-inline-size can improve readability by preventing text lines from becoming too long, which can be difficult for users with certain cognitive disabilities to track. However, ensure that your containers can still expand or scroll if the user increases their font size or zoom level, so content doesn't get cut off.

Dev Data Table: max-inline-size property

default	none
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.maxInlineSize = "500px";
js_syntax_2	element.style.setProperty("max-inline-size", "500px");
js_note	When manipulating logical properties in JavaScript, remember to use camelCase for the style object or the hyphenated string for setProperty().
browsers	{ "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }