CSS max-inline-size Property

What You’ll Learn

The max-inline-size property caps how large an element can grow along the inline axis. In everyday horizontal layouts, that usually means limiting width while still letting narrow content stay compact.

Introduction

The max-inline-size property in CSS defines the maximum size of an element in the inline direction. This property is useful for setting a constraint on the width of an element, especially in layouts where text flow and element sizing need to be controlled.

It is often used in responsive design to ensure that elements do not exceed a certain width, regardless of the container size or screen width.

Definition and Usage

In horizontal writing modes such as English, the inline axis runs left to right, so max-inline-size: 300px; usually caps width. In vertical writing modes, the same property caps height instead.

Pair max-inline-size with overflow: auto when content might exceed the limit, and use it alongside inline-size and min-inline-size for full logical sizing control.

📝 Syntax

The syntax for the max-inline-size property is simple. It can be applied to any block-level or inline-level element:

element {
  max-inline-size: value;
}

Here, value can be any valid CSS length value, such as pixels, percentages, or viewport units, or the keyword none.

Basic Example

p {
  max-inline-size: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

Syntax Rules

• The initial value is none, meaning no maximum inline-size constraint.
• Length values such as px, rem, and vw set a fixed upper limit.
• Percentages are relative to the containing block’s inline size.
• Keywords like min-content, max-content, and fit-content cap size based on content.
• Use with overflow when content may exceed the maximum and should scroll.

🎯 Default Value

The default value of max-inline-size is none. Without explicit styling, the element has no maximum size constraint along the inline axis and can grow as needed based on its content and other sizing properties.

💎 Property Values

These are the most common values you will use with max-inline-size.

Max Inline Size and Writing Modes

max-inline-size follows the writing mode instead of always mapping to horizontal max-width. That is the main reason to choose it over physical properties like max-width.

• inline-size sets the preferred inline dimension; max-inline-size sets the upper limit.
• min-inline-size sets the lower limit on the same axis.
• Logical properties help components stay correct when text direction or writing mode changes.

max-inline-size vs max-width

Examples Gallery

Try max-inline-size with readable text columns, percentage caps, viewport-relative limits, and side-by-side comparisons.

<style>
  p {
    max-inline-size: 300px;
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<p>
  This paragraph will not exceed 300 pixels in width, even if the containing block is wider.
</p>

.article {
  max-inline-size: 20rem;
  margin-inline: auto;
  padding: 1rem;
  background: #dbeafe;
}

.card {
  max-inline-size: 80vw;
  margin-inline: auto;
  padding: 1.5rem;
}

.none { max-inline-size: none; }
.sm { max-inline-size: 200px; }
.md { max-inline-size: 400px; }

💡 Best Practices