CSS max-inline-size Property

Definition and Usage

The max-inline-size property sets a maximum size on the inline axis. In the default horizontal writing mode it behaves like max-width. In a vertical writing mode it behaves like max-height.

The box can stay smaller than the limit. It cannot grow past the ceiling on that axis. Pair it with inline-size and min-inline-size for full logical sizing. The other axis uses max-block-size.

CSS Syntax

Values match max-width / max-height. Start with none, lengths, and percentages.

Property Values

How to Use max-inline-size

Cap the inline axis, then remember that writing mode decides which physical side that is.

1. Leave max-inline-size: none when the box should grow freely inline.
2. Set a length or percentage to cap growth (great for readable line lengths).
3. Know your writing-mode: horizontal maps to width; vertical maps to height.
4. Use max-width only when you specifically need a physical horizontal ceiling.

Live Preview

Same paragraph, different max-inline-size values. In horizontal writing, the box stops growing wider.

CSS Examples

Each snippet focuses on max-inline-size. Use Try It Yourself for a live editor.

<style>
  p {
    max-inline-size: 20rem;
  }
</style>

<p>This paragraph will not grow wider than 20rem.</p>

<style>
  p {
    writing-mode: vertical-rl;
    max-inline-size: 8rem;
  }
</style>

<p>Inline axis is vertical here.</p>

<style>
  .free {
    max-inline-size: none;
  }

  .capped {
    max-inline-size: 12rem;
  }
</style>

<p class="free">Grows with the container.</p>
<p class="capped">Stops at 12rem on the inline axis.</p>

Key Takeaways