CSS max-inline-size Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The max-inline-size property defines an upper limit on the size of an element in the inline axis — that is, it prevents the element from growing larger than the specified maximum along whatever direction is considered "inline" for that element. Because it is a logical property, the inline axis depends on writing direction and orientation: in a horizontal left-to-right context the inline axis corresponds to the horizontal dimension, while in vertical-rl or vertical-lr contexts it corresponds to a vertical dimension. Use of max-inline-size lets you express size constraints in writing-mode–aware terms, so the same rule can apply correctly across different languages and layouts without switching between physical properties like width and height.

In layout resolution, max-inline-size participates in the usual min/max clamping: the used inline size of an element is bounded by any specified minimums and maximums and by constraints imposed by the formatting context. It works together with logical sizing properties such as min-inline-size and inline-size to establish a final inline dimension; for example, an explicit inline size can be reduced to satisfy a max-inline-size, and a min-inline-size can keep it from shrinking below a lower bound. Percentages used with max-inline-size resolve against the inline size of the containing block, so its effect is responsive to the container’s inline dimension rather than always to the physical width.

Practically, max-inline-size is useful for controlling wrapping, overflow, and visual rhythm without tying rules to a particular writing direction. When combined with orientation-related properties such as writing-mode, it enables a single stylesheet to constrain elements appropriately for both horizontal and vertical text flows. It also complements physical maximums like max-width when you need behavior tied to the inline axis specifically; for example, in internationalized components or in rotated layouts, max-inline-size ensures limits follow the content flow rather than the page’s horizontal axis. This property is commonly used to keep lines of text readable, prevent oversized UI controls, and create consistent adaptive components across different writing modes.

Definition

Initial value: none
Applies to: same as width and height
Inherited: no
Computed value: same as width and height
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.maxInlineSize

Interactive Demo

max-inline-size: 150px;
writing-mode: horizontal-tb;

max-inline-size: 150px;
writing-mode: vertical-rl;

max-inline-size: 20px;
writing-mode: horizontal-tb;

max-inline-size: 75%;
writing-mode: vertical-lr;

This is a box where you can change the max-inline-size.

Syntax

max-inline-size: <max-width>

Values

<max-width>Defines the max-block-size as an value or percentage.

Example

HTML

<div class="wrapper">

  <h2>max-inline-size Demo</h2>

  <div class="example">

    <div class="box default">

      <strong>No max-inline-size</strong>

      <p>

        This box uses a large inline size (40rem) so the text stretches across the line.

        It demonstrates the default behavior when no max-inline-size is set.

      </p>

    </div>

    <div class="box constrained">

      <strong>With max-inline-size: 16rem</strong>

      <p>

        This box also requests a large inline size (40rem) but max-inline-size limits it to 16rem.

        Overflow is enabled to allow scrolling if content exceeds the limit.

      </p>

    </div>

  </div>

</div>

CSS

/* Basic reset and typography */
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 2rem;
  background: #f7f8fa;
  color: #111827;
}

.wrapper {
  max-width: 78rem;
  margin: 0 auto;
}

.example {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.box {
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  inline-size: 40rem; /* requests a wide inline size */
}

.box p {
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.box.constrained {
  max-inline-size: 16rem; /* limits the inline size regardless of the requested inline-size */
  overflow: auto; /* allow scrolling when content exceeds the max-inline-size */
}

.box.default {
  /* intentionally no max-inline-size */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS max-inline-size property. Hover over a browser icon to see the version that first introduced support for this CSS property.