Max Width

Control maximum width with size, fraction, and keyword max-width utilities.

Overview

Max-width utilities cap width with the same suffix families used by width and min-width.

Pattern	Supported values
maximum-width-<size>	3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
maximum-width-<fraction>	1-2, 1-3, 2-3, 1-4, 3-4
maximum-width-<value>	px, auto, full, screen

Examples

Using the size scale

Use the t-shirt scale when content should stop growing after it reaches a predictable readable width.

<div class="elementor-element width-full rounded-lg padding-3 background-gray-light">
  <div class="width-full maximum-width-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    maximum-width-xl
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-width-<size>	maximum-width-3xs, maximum-width-2xs, maximum-width-xs, maximum-width-sm, maximum-width-md, maximum-width-lg, maximum-width-xl, maximum-width-2xl, maximum-width-3xl, maximum-width-4xl, maximum-width-5xl, maximum-width-6xl, maximum-width-7xl	Maximum widths based on the size ladder

Using a percentage

Use fractional max-width utilities when a block should stay fluid but stop growing past a fixed percentage of its parent.

<div class="elementor-element width-full rounded-lg padding-3 background-gray-light">
  <div class="width-full maximum-width-1-2 margin-horizontal-auto padding-3 background-primary text-white rounded text-center text-sm font-bold">
    maximum-width-1-2
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-width-<fraction>	maximum-width-1-2, maximum-width-1-3, maximum-width-2-3, maximum-width-1-4, maximum-width-3-4	Maximum width as a percentage of the parent

Keeping content inside the parent

Use maximum-width-full when a child should never exceed the width of its parent container.

<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="width-full maximum-width-full padding-3 background-success text-white rounded text-center text-sm font-bold">
    maximum-width-full
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-width-full	maximum-width-full	Caps width at the full parent width

Matching the viewport cap

Use maximum-width-screen when an element can grow wide, but its cap should still align to the viewport instead of the document container.

<div class="elementor-element overflow-hidden rounded-lg">
  <div class="width-full maximum-width-screen padding-3 background-primary text-white text-center text-sm font-bold">
    maximum-width-screen
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-width-screen	maximum-width-screen	Caps width at the viewport width

Removing a width cap

Use maximum-width-auto when you need to remove a previous max-width limit and let content grow naturally again.

<div class="elementor-element overflow-auto rounded-lg padding-3 background-gray-light">
  <div class="maximum-width-auto minimum-width-xl padding-3 background-secondary text-black rounded text-center text-sm font-bold">
    maximum-width-auto
  </div>
</div>

Pattern	Supported classes	What it controls
maximum-width-auto	maximum-width-auto	Removes a previously applied max-width cap

Best Practices

• Use maximum-width-<size> for readable content rails and fixed shells that should stop expanding.
• Use maximum-width-<fraction> when a block should stay fluid inside a parent layout.
• Use maximum-width-full for children that must not overflow their parent.
• Use maximum-width-auto when you intentionally need to remove a previous width cap.

Related Utilities

Width

Pair width and max-width for responsive layouts

Min Width

Container-scale and keyword minimum widths