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.
.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-widthcaps its growth on wide screens.margin-inline: autocenters it when there is extra space.padding-inlineprovides room between its content and the edges.box-sizing: border-boxincludes 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
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
How it interacts with width and min-width
| Declaration | What it requests | Typical use |
|---|---|---|
width: 500px |
A width of 500px, subject to sizing constraints. | A deliberately fixed-size element; it may be too wide for a narrow parent. |
max-width: 500px |
An upper limit of 500px, without requiring the element to fill it. | Cap an element that should otherwise size according to its layout. |
width: 100%; max-width: 500px |
Use the available width up to 500px. | A fluid component with a maximum size. |
min-width: 300px |
A lower limit of 300px. | Keep a component from becoming narrower than its design allows. |
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:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors.panel { max-width: 60rem; }
.photo { max-width: 100%; }
.prose { max-width: 65ch; }
.compact { max-width: fit-content; }pxgives a predictable geometric cap.remis relative to the root font size and often suits reusable layout limits.chis 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.vwscales against the viewport and may be a poor fit for a component inside a narrower nested layout.- Container-relative units such as
cqican 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:
.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().
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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.
Free tools Windows power users keep installed
One-click scans. No signup required.
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
- 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
.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):
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →.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.
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:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.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.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteContainer 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
.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-widthdoes not apply. - A later or more specific declaration overrides the rule.
- A larger
min-widthor 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
Quick choice guide
| Need | Useful starting point | Watch for |
|---|---|---|
| Fluid container with a cap | width: 100%; max-width: 70rem; |
Add gutters and a centering method if needed. |
| Oversized image should shrink, smaller one should not stretch | max-width: 100%; height: auto; |
Check the specific element’s intrinsic sizing and height behavior. |
| Content must not shrink below a minimum | min-width: … |
A minimum larger than the maximum can defeat the intended cap. |
| Prose needs a measure limit | max-width: 65ch; |
ch is font-relative, not an exact character count. |
| Layout should change at a viewport size | @media (max-width: …) |
This is a condition, not an element-size limit. |
| Component should adapt to its parent region | @container query |
Establish a query container on an ancestor. |
| Writing-mode-aware inline cap | max-inline-size: … |
It constrains the logical inline axis rather than always the horizontal axis. |
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.
