📏 CSS min-inline-size — Complete Tutorial

🌐 What Is min-inline-size?

The min-inline-size property sets theminimum 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 min-inline-size to prevent elements from shrinking too small across all writing systems.”

Note

✔ Logical equivalent of min-width
✔ Writing-mode aware
✔ Great for responsive + internationalized UI

📦 Syntax

min-inline-size syntax

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

📌 Understanding Logical Directions

Writing ModeInline Directionmin-inline-size Equals
horizontal-tbleft → rightmin-width
vertical-rltop → bottommin-height

📌 1. Basic Example (Horizontal Writing)

Basic min-inline-size

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

📌 2. Vertical Writing Mode Example

Vertical writing

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

Inline axis becomes vertical — the logic adapts automatically.

📌 3. Using Percentages

Percentage min inline size

.panel {
  min-inline-size: 50%;
}

Relative to the parent’s inline-size (width in horizontal writing).

📌 4. Prevent Text From Becoming Too Narrow

Text readability

.text {
  min-inline-size: 30ch; /* Minimum readable width */
}

Helps maintain proper readability across devices.

📌 5. Intrinsic Sizing Keywords

Intrinsic sizes

.item {
  min-inline-size: min-content;  /* shrink to the smallest possible */
  min-inline-size: max-content;  /* expand to longest content */
}

📌 6. Prevent Buttons From Collapsing

Button min size

button {
  min-inline-size: 6rem; /* consistent width */
}

📌 7. Flex & Grid Items With Minimum Inline Size

Flex + grid example

.flex-item {
  flex: 1;
  min-inline-size: 150px;
}

.grid-item {
  min-inline-size: 120px;
}

📌 8. Responsive Input Field

Input min width

input {
  min-inline-size: 200px;
}

Prevents inputs from shrinking too much on small screens.

🧪 Real-World Use Cases

1️⃣ A Card Component That Always Stays Wide Enough

Card

.card {
  min-inline-size: 250px;
  padding: 1rem;
}

2️⃣ Data Table Column Width Limits

Table column

th, td {
  min-inline-size: 8rem;
}

3️⃣ Avoiding UI Breaks in RTL Layouts

RTL Friendly

.rtl {
  direction: rtl;
  min-inline-size: 15rem;
}

⚠️ Common Mistakes

  • ❌ Mixing min-width and min-inline-size (confusing maintenance)
  • ❌ Forgetting inline direction changes in vertical writing
  • ❌ Using it on inline elements without converting them to block or inline-block

Note

Use logical sizing (min-inline-size) when designing for language-aware layouts or reusable components.

🔥 Summary

min-inline-size sets the minimum size across the inline axis — acting like min-width in horizontal writing andmin-height in vertical writing modes. It future-proofs components and ensures better responsiveness.

>>“Logical sizing like min-inline-size ensures your UI works in every language and writing mode.”

Learn more →MDN Docs 📘