CSS max-width: How It Works and How to Use It

Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.

CSS max-width sets an upper limit on an element’s used width; it does not force the element to reach that width. Pair it with a fluid width when you want a component to fill available space on small screens but stop growing on large ones.

What does max-width do?

max-width constrains how wide an element can become. If the element’s width would exceed the limit, the maximum constrains it; if the element is already narrower, the property does not make it wider. Its initial value is none, and percentage values are based on the width of the containing block—not automatically on the viewport. See MDN’s max-width reference.

#	Preview	Product	Price
1		HTML and CSS: Design and Build Websites	$15.75	Buy on Amazon
2		HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding...	$23.25	Buy on Amazon
3		Web Design with HTML, CSS, JavaScript and jQuery Set	$35.05	Buy on Amazon
4		Murach's HTML and CSS (6th Edition): Professional Web Development Book for Modern Responsive Design...	$44.20	Buy on Amazon
5		HTML, CSS, & JavaScript All-in-One For Dummies	$23.27	Buy on Amazon

.box {
  max-width: 40rem;
}

This sets a cap, not a fixed size. A box with only that declaration may be narrower depending on its layout and content. To let it use available space up to the cap, give it a fluid width too:

.box {
  width: 100%;
  max-width: 40rem;
}

Make a responsive, centered container

.container {
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}

• width: 100% lets the container use the available inline space.
• max-width caps its growth on wide screens.
• margin-inline: auto centers it when there is extra space.
• padding-inline provides room between its content and the edges.
• box-sizing: border-box includes padding and borders in the declared dimensions.

max-width does not center an element by itself. Auto margins or a parent layout rule do the centering. For details on how padding, borders, and box dimensions interact, see MDN’s box-sizing guide.

#1 Best Overall

Sale

HTML and CSS: Design and Build Websites

• HTML CSS Design and Build Web Sites
• Comes with secure packaging
• It can be a gift option

$15.75

Buy on Amazon

How it interacts with width and min-width

Minimum and maximum constraints are resolved together, not by ordinary cascade precedence. If min-width is greater than max-width, the minimum can prevent the element from shrinking to the stated maximum. For example, a 500px minimum cannot fit within a 400px maximum. When a width behaves unexpectedly, inspect all three properties. See MDN’s width reference and the CSS 2.1 width constraints.

Keep images and other media within their container

img {
  display: block;
  max-width: 100%;
  height: auto;
}

max-width: 100% lets an image larger than its containing block shrink to fit, but does not stretch a naturally smaller image to fill the space. height: auto preserves the image’s aspect ratio as its width changes. This is different from width: 100%, which requests that the image fill the available width. The same basic cap can help with video or SVG, but their height and intrinsic-sizing requirements may differ. See MDN’s guide to sizing elements.

Choose a value and unit

The property accepts non-negative lengths and percentages, along with sizing keywords and functions defined by CSS sizing specifications. Common examples include:

.panel { max-width: 60rem; }
.photo { max-width: 100%; }
.prose { max-width: 65ch; }
.compact { max-width: fit-content; }

• px gives a predictable geometric cap.
• rem is relative to the root font size and often suits reusable layout limits.
• ch is based on the width of the “0” glyph in the relevant font. It can help constrain prose, but it is not a guaranteed character count or universal measure of line length.
• % scales against the containing block.
• vw scales against the viewport and may be a poor fit for a component inside a narrower nested layout.
• Container-relative units such as cqi can size against a query container when that is the intended reference.

There is no universally correct maximum: choose one that suits the content, type, and layout, then verify it at narrow and enlarged sizes.

Intrinsic sizing keywords

Values such as min-content, max-content, and fit-content size against the content’s intrinsic contributions rather than a single fixed cap. Broadly, min-content reflects the narrowest content can become without avoidable expansion; max-content reflects its preferred unwrapped size; and fit-content fits within the available space while respecting intrinsic limits. For example, nav { max-width: fit-content; } can keep a navigation block close to its content, but a long label and limited available room still affect wrapping and layout. The exact behavior is defined in the max-width reference and the max-content reference.

Fluid sizing with min() and clamp()

Use sizing functions when a dimension should vary continuously rather than change only at breakpoints:

Rank #2

Sale

HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering ... (Coding & Programming - QuickStart Guides)

$23.25

Buy on Amazon

.panel {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}

.hero-title {
  max-width: clamp(20rem, 80vw, 60rem);
}

The first example sets a width that leaves gutters while capping the panel. A width: 100% plus max-width pattern expresses the same general idea with separate declarations and may be easier to adjust. clamp() combines a minimum, preferred value, and maximum; see the references for clamp() and max().

Newer value: stretch

max-width: stretch limits the margin box to the containing block’s width while attempting to fill the available space. Because newer sizing values can have different browser support from the established length and percentage patterns, check compatibility for your target browsers before relying on it. For broad support, start with a conventional fallback and test the margin, padding, and border behavior:

.element {
  width: 100%;
  max-width: 100%;
}

@supports (max-width: stretch) {
  .element {
    max-width: stretch;
  }
}

Why a capped element can still overflow

max-width constrains the selected element; it does not guarantee that every descendant or layout contribution will fit. Find the actual source of the overflow before applying a fix.

Padding and borders expand the visible box

With the default content-box sizing, the declared width generally covers the content box, with padding and borders added outside it. A 100%-wide element with padding can therefore extend beyond its parent. A global border-box rule is a common way to make declared width and maximum width include padding and borders:

*,
*::before,
*::after {
  box-sizing: border-box;
}

This does not fix overflow from an oversized child or unbreakable content.

Unbreakable text or a wide descendant

A long URL, identifier, or other unbroken string can exceed its container. Where breaking is appropriate, use overflow-wrap: anywhere selectively:

Rank #3

Sale

Web Design with HTML, CSS, JavaScript and jQuery Set

• Brand: Wiley
• Set of 2 Volumes
• A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers

$35.05

Buy on Amazon

.long-text {
  overflow-wrap: anywhere;
}

A descendant with its own fixed width can overflow even when its parent is capped. Inspect the descendant rather than adding arbitrary width rules to the parent.

Flexbox automatic minimum size

A flex item may resist shrinking because of its automatic, content-based minimum size. Allow the content column to shrink with min-width: 0; max-width: 100% alone may not be enough.

.layout {
  display: flex;
  gap: 1rem;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
}

.content img {
  max-width: 100%;
  height: auto;
}

Grid track sizing

A grid item’s content can contribute a min-content size that keeps a track wider than expected. Let the flexible track shrink with minmax(0, 1fr):

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
}

For responsive cards, a track definition can adapt to available space:

.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 16rem), 1fr)
  );
  gap: 1rem;
}

Grid track sizing and item sizing are related but separate: minmax() sets the track’s allowed range, while max-width constrains an item.

Positioning, replaced elements, or other constraints

Positioned or transformed content may extend beyond normal flow, and tables, iframes, canvases, or embedded widgets can bring intrinsic or internal sizing constraints. Identify which node and sizing rule creates the overflow; a cap on a different ancestor may not address it.

Rank #4

Sale

Murach's HTML and CSS (6th Edition): Professional Web Development Book for Modern Responsive Design - Comprehensive HTML and CSS Book with Hands-on Projects & Real Examples for Web Design

$44.20

Buy on Amazon

Distinguish the property from a media-query condition

The spelling looks similar, but the two uses serve different purposes. The property limits an element’s layout size:

img {
  max-width: 100%;
}

A media feature tests a viewport or page-box width and conditionally applies styles:

@media (max-width: 40rem) {
  .menu {
    display: none;
  }
}

Media Queries Level 4 also defines range syntax:

@media (width <= 40rem) {
  .menu {
    display: none;
  }
}

Use the property for a size constraint and a media query when a viewport-width condition should trigger a change in layout, visibility, or other styles. Check support for the syntax you intend to use. See MDN’s width media-feature reference.

Use logical sizing or container queries when the layout calls for them

max-inline-size for writing-mode-aware layouts

max-width constrains the physical horizontal dimension. max-inline-size constrains the logical inline dimension, which can be horizontal or vertical depending on writing mode:

.article {
  max-inline-size: 65ch;
}

Use the logical property when the design should adapt to different writing modes; use max-width when the physical horizontal dimension is what you mean.

Container queries for reusable components

A media query responds to viewport size. A container query responds to an ancestor’s size, which is useful when the same component appears in differently sized regions:

Best Value

Sale

HTML, CSS, & JavaScript All-in-One For Dummies

$23.27

Buy on Amazon

.card-wrapper {
  container-type: inline-size;
}

@container (width <= 30rem) {
  .card {
    grid-template-columns: 1fr;
  }
}

The ancestor must establish a queryable containment context, commonly with container-type: inline-size or size. A container query changes styles based on that container; it does not replace the element-sizing constraint max-width. See MDN’s container queries guide.

Debug a max-width rule that seems ineffective

Use browser developer tools to select the element and check its computed styles, box model, and layout context. These are common causes:

• The element is already narrower than the maximum.
• The target is a non-replaced inline element, for which max-width does not apply.
• A later or more specific declaration overrides the rule.
• A larger min-width or a parent constraint affects the result.
• The visible overflow comes from a descendant, padding or border, positioned content, or intrinsic content size.
• Flexbox or Grid is preserving a content-based minimum.
• You are comparing the border box with a width calculated for the content box.
• The element is outside normal flow or transformed.

To locate the overflowing node, temporarily outline elements:

* {
  outline: 1px solid rgb(255 0 0 / 20%);
}

Then inspect width, min-width, max-width, box-sizing, the parent’s size, and any flex or grid rules. Match the remedy to what you find: for example, overflow-wrap: anywhere for breakable long text, min-width: 0 for a flex item, or minmax(0, 1fr) for a grid track. Avoid using overflow-x: hidden as the first fix: it can hide the cause and clip focus rings or interactive content.

Check the layout at narrow widths and enlarged text

A maximum-width cap is useful only if content can still reflow without clipping or being obscured. Check the page at narrow viewport sizes, with browser zoom and enlarged text, and with long URLs, identifiers, translated labels, or other content that may take more space. Avoid fixed heights that cut off reflowed content. A 65ch prose cap is a design choice, not a universal accessibility threshold; verify that the resulting text measure works for the font and language in use. The MDN property reference provides further guidance on sizing and accessibility considerations.

Quick Recap

SaleBestseller No. 1

HTML and CSS: Design and Build Websites

HTML CSS Design and Build Web Sites; Comes with secure packaging; It can be a gift option

$15.75

SaleBestseller No. 2

HTML and CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering ... (Coding & Programming - QuickStart Guides)

$23.25

SaleBestseller No. 3

Web Design with HTML, CSS, JavaScript and jQuery Set

Brand: Wiley; Set of 2 Volumes

$35.05

SaleBestseller No. 4

Murach's HTML and CSS (6th Edition): Professional Web Development Book for Modern Responsive Design - Comprehensive HTML and CSS Book with Hands-on Projects & Real Examples for Web Design

$44.20

SaleBestseller No. 5

HTML, CSS, & JavaScript All-in-One For Dummies

$23.27

Quick choice guide

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.