📏 CSS max-inline-size — Complete Tutorial

🌐 What Is max-inline-size?

The max-inline-size property sets themaximum size of an element along the inline direction. The inline direction depends on the document’s writing-mode:

  • ➡ Horizontal writing (English): inline = width
  • ⬆ Vertical writing (Japanese/Chinese): inline = height
>>“Use max-inline-size to prevent elements from growing too wide (or too tall in vertical writing modes).”

Note

✔ Logical alternative to max-width
✔ Writing-mode aware
✔ Makes UI more robust in RTL & vertical scripts

📦 Syntax

max-inline-size syntax

max-inline-size: <length> | <percentage> | none | max-content | min-content | fit-content();

📌 Understanding Logical Directions

Writing ModeInline Directionmax-inline-size Equals
horizontal-tbleft → rightmax-width
vertical-rltop → bottommax-height

📌 1. Basic Example (Horizontal Writing)

Basic max-inline-size

.box {
  max-inline-size: 400px; /* same as max-width: 400px */
}

📌 2. Vertical Writing Mode Example

Vertical writing example

.vertical {
  writing-mode: vertical-rl;
  max-inline-size: 300px; /* now acts like max-height */
}

The logical inline direction flips when writing mode changes.

📌 3. Using Percentages

Percentage max inline size

.panel {
  max-inline-size: 80%;
}

Limits width relative to parent’s inline-size (usually width).

📌 4. Limit Text Width for Better Readability

Text width control

p {
  max-inline-size: 65ch; /* ideal readable line length */
}

Very common in blogs & documentation sites.

📌 5. Intrinsic Sizing Keywords

Intrinsic keywords

.item {
  max-inline-size: max-content;
  max-inline-size: min-content;
  max-inline-size: fit-content(300px);
}

📌 6. Responsive Card Layout

Card example

.card {
  max-inline-size: 350px;
  padding: 1rem;
}

📌 7. Prevent Buttons From Becoming Too Wide

Button limit

button {
  max-inline-size: 12rem;
}

📌 8. Use With Flex and Grid Layouts

Flex/Grid item

.flex-item {
  flex: 1;
  max-inline-size: 400px;
}

.grid-item {
  max-inline-size: 250px;
}

🧪 Real-World Use Cases

1️⃣ Blog or Article Container

Article width

.content {
  max-inline-size: 70ch;
  margin-inline: auto;
}

Ensures perfect reading width even in RTL languages.

2️⃣ Product Cards That Should Not Stretch

Product card

.product {
  max-inline-size: 300px;
}

3️⃣ Prevent Form Inputs From Getting Too Wide

Form input

input {
  max-inline-size: 20rem;
}

4️⃣ Japanese / Vertical Writing Layouts

Vertical layout

.vertical-text {
  writing-mode: vertical-rl;
  max-inline-size: 25rem; /* acts like max-height */
}

⚠️ Common Mistakes

  • ❌ Using max-width instead of max-inline-size in RTL/vertical layouts
  • ❌ Forgetting inline direction changes in writing-mode
  • ❌ Applying max-inline-size to inline elements without making them block/inline-block
  • ❌ Expecting it to add overflow — you must set overflow manually

Note

Logical properties like max-inline-size are more future-proof, especially for multilingual websites.

🔥 Summary

The max-inline-size property defines the maximum size along the inline axis — usually max-width, but it becomesmax-height in vertical writing modes. It enables more adaptable, global-friendly, and responsive layouts.

>>“Inline-size and block-size are the modern way to think about dimensions — flexible and writing-mode aware.”

Learn more →MDN Docs 📘