CSS Max-width
In this page:
selector {
max-width: length;
width: 100%;
}Max-width vs Width
The standard width property defines a fixed horizontal size. If a screen is narrower than that width, the element overflows, causing a horizontal scrollbar. The max-width property allows the element to shrink to fit smaller screens, while capping its size on larger displays.
- Use max-width instead of width for main containers to make your pages responsive instantly.
- Accepted values:
- length — a fixed cap such as 800px
- percentage — cap relative to the containing block
- none — no limit (default)
- min-content | max-content | fit-content — content-based caps
- ch — width based on character count
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Max-width vs Width
<style>
.narrow-container {
width: 300px;
border: 2px dashed #999;
padding: 10px;
overflow-x: auto;
}
.fixed {
width: 600px;
background: crimson;
color: white;
padding: 10px;
margin-bottom: 10px;
}
.fluid {
max-width: 600px;
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="narrow-container">
<div class="fixed">width: 600px — overflows the 300px container</div>
<div class="fluid">max-width: 600px — shrinks to fit the 300px container</div>
</div>Centering Containers with Auto Margins
Setting a max-width on a block element is only half the battle. To keep it visually balanced, you can pair it with auto margins (margin: 0 auto). This instructs the browser to calculate the remaining space on both sides of the element and split it equally, centering the block.
- Margin auto only works if the element is block-level and has a defined width or max-width.
- Accepted values:
- auto — splits the free space (centers a block with a width)
- 0 auto — no vertical margin, centered horizontally
- length — a fixed amount of space
- auto on one side — pushes the element to the other side in flex layouts
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Example: Centering Containers with Auto Margins
<style>
.container {
max-width: 400px;
margin: 0 auto;
background: lightblue;
padding: 10px;
text-align: center;
}
</style>
<div class="container">Centered container</div>Responsive Fluid Images
By default, images load at their native pixel dimensions. If an image is 1200px wide, it will overflow on mobile screens. Applying max-width: 100% instructs the browser to scale the image down dynamically to fit its parent container.
Example: Responsive Fluid Images
<style>
img {
max-width: 100%;
}
</style>
<img src="https://placehold.co/1200x400" alt="Scales down to fit its parent">Max-width with Box-Sizing
By default, borders and padding add to an element's physical width. If you set max-width to 500px and add 20px of padding, the actual box expands to 540px. The box-sizing: border-box property forces borders and padding to sit inside your max-width.
Example: Max-width with Box-Sizing
<style>
.box {
max-width: 500px;
padding: 20px;
box-sizing: border-box;
background: lightgoldenrodyellow;
border: 2px solid goldenrod;
}
</style>
<div class="box">Padding stays inside the 500px max-width</div>Max-width with Viewport Units
Using percentage limits can sometimes be restrictive. Viewport width (vw) units allow you to scale containers dynamically relative to the browser window size, which is useful for fluid grid layouts.
- Combine clamp() with viewport units to create highly responsive container scales.
- Accepted values:
- vh — 1% of the viewport height
- vw — 1% of the viewport width
- vmin — 1% of the smaller viewport dimension
- vmax — 1% of the larger viewport dimension
- dvh / svh / lvh — dynamic, small and large viewport heights
Example: Max-width with Viewport Units
<style>
.container {
max-width: 90vw;
background: lightpink;
padding: 10px;
margin: 0 auto;
}
</style>
<div class="container">Scales relative to the browser window width</div>- Using fixed widths instead of max-width on main page containers, causing layout-breaking horizontal scrolls on mobile.
- Omitting border-box configuration, causing containers with 100% max-width and padding to overflow.
- Applying fixed pixel widths to responsive image assets, stretching them out of shape on small screens.
- The max-width property allows elements to scale down on smaller screens while capping their size on larger displays.
- Center block containers horizontally on your page by pairing max-width with margin: 0 auto.
- Use max-width: 100% on images to make them responsive, and set box-sizing: border-box globally to prevent layout overflow.
The max-width property and border-box sizing are supported natively by all modern web browsers.
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: