CSS max-width Property

What You’ll Learn

The max-width property sets the maximum horizontal width of an element. It is especially useful for creating flexible layouts that adapt to various screen sizes while maintaining design integrity.

Introduction

The max-width property in CSS is used to set the maximum width of an element. It defines the upper limit of the width an element can grow to, allowing it to be responsive while preventing it from exceeding a specified size.

This property is particularly useful for creating flexible layouts that adapt to various screen sizes while maintaining design integrity.

Definition and Usage

max-width always limits horizontal width in normal horizontal layouts. The element can be narrower than the limit, but it will not grow wider once it reaches the maximum.

Pair max-width with margin: 0 auto to center containers, and use it alongside width and min-width for full horizontal sizing control.

📝 Syntax

The syntax for the max-width property is as follows:

element {
  max-width: value;
}

Here, value can be a length (e.g., pixels, ems) or a percentage.

Basic Example

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f0f0f0;
}

Syntax Rules

• The initial value is none, meaning no maximum width constraint.
• Length values such as px, rem, and vw set a fixed upper limit.
• Percentages are relative to the containing block’s width.
• auto is not valid for max-width; use none to remove the cap.

🎯 Default Value

The default value of the max-width property is none. This means that, by default, there is no maximum width constraint applied, and the element can expand based on its content and other layout factors.

💎 Property Values

These are the most common values you will use with max-width.

Width, min-width, and max-width

Use physical width properties together when you want predictable horizontal sizing in standard layouts.

• width sets the preferred or fixed width of the box.
• min-width sets the lower limit so content never shrinks below a minimum.
• max-width sets the upper limit on the same horizontal axis.
• For writing-mode-aware layouts, see max-inline-size on the logical inline axis.

max-width vs max-inline-size

Examples Gallery

Try max-width with centered containers, percentage caps, viewport-relative limits, and side-by-side comparisons.

<style>
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
  }
</style>

<div class="container">
  This container will not exceed 600 pixels in width.
</div>

<style>
  .container {
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
    background-color: #e0e0e0;
  }
</style>

<div class="container">
  Responsive container content…
</div>

.card {
  max-width: 90vw;
  margin: 0 auto;
  padding: 1.5rem;
}

.none { max-width: none; }
.sm { max-width: 400px; }
.md { max-width: 600px; }

💡 Best Practices