📏 CSS inline-size — Complete Tutorial

🌐 What Is inline-size?

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

  • ➡ In horizontal writing (English): inline = width
  • ⬆ In vertical writing (Japanese, Chinese): inline = height
>>“Use inline-size for layouts that automatically adapt to writing modes, languages, and text flow.”

Note

✔ Logical equivalent of width
✔ Writing-mode aware
✔ Great for international & responsive web design

📦 Syntax

inline-size syntax

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

📌 Understanding Logical Directions

Writing ModeInline Directioninline-size Equals
horizontal-tb (default)left → rightwidth
vertical-rltop → bottomheight

📌 1. Basic Example (Horizontal Writing)

Inline-size = width

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

📌 2. Vertical Writing Mode Example

Vertical writing

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

In vertical writing, inline direction is vertical — so inline-size becomes height.

📌 3. Using Percentages

Percentage inline-size

.panel {
  inline-size: 50%;
}

Applies against the parent's **inline-size** (width in horizontal writing).

📌 4. Using Intrinsic Sizing Keywords

Intrinsic inline-size

.box {
  inline-size: max-content;   /* Expand to longest content */
  inline-size: min-content;   /* Shrink to smallest size */
  inline-size: fit-content(250px);
}

📌 5. Replace Width With Inline-Size in Flexible Layouts

Logical width replacement

.card {
  inline-size: 400px;
}

Makes components work automatically in RTL and vertical text environments.

📌 6. Limiting Inline Size

Min & Max inline-size

.text-block {
  min-inline-size: 200px;
  max-inline-size: 600px;
}

Equivalent to:min-width & max-width in horizontal writing.

🧪 Real-World Use Cases

1️⃣ Restrict Paragraph Width for Readability

Readable text

p {
  max-inline-size: 65ch;
}

Ensures ideal reading line length, even in RTL languages.

2️⃣ Responsive Card Layout

Card

.card {
  inline-size: 90%;
  max-inline-size: 400px;
}

3️⃣ Vertical Writing UI Component

Vertical mode

.japan {
  writing-mode: vertical-rl;
  inline-size: 200px; /* this becomes height */
}

⚠️ Common Mistakes

  • ❌ Mixing width and inline-size (causes conflicts)
  • ❌ Forgetting inline direction changes in vertical writing
  • ❌ Setting inline-size on inline elements without display: block/inline-block

Note

Use inline-size when your design must support multiple languages or writing modes.

🔥 Summary

The inline-size property defines an element’s size along the inline axis (width in most languages, height in vertical scripts). It replaces width in modern, writing-mode–responsive CSS.

>>“For multilingual layouts, logical sizes like inline-size are the future of CSS.”

Learn more →MDN Docs 📘