CSS max-width Property

The max-width property in CSS defines the maximum width an element can occupy, ensuring that it doesn't exceed a specified width. This property plays a crucial role in responsive design, allowing the content to adjust within a defined limit. It helps in creating flexible layouts that look great on various screen sizes.

Syntax

max-width: none | length | percentage (%) | initial | inherit;

Property Values

All the properties are described well in the example below.

Examples of Using max-width

Example 1: Using max-width with none

In this example, the max-width property is set to none, allowing the paragraphs to expand without any restriction on width.

Output:

👁 max-width property

Example 2: Using max-width with length

Here, we set the maximum width to a specific length (300px) to prevent the paragraph from growing wider than that value.

Output:

👁 Image

Example 3: Using max-width with Percentage

In this example, the maximum width is set as a percentage of the parent container’s width, making the element flexible.

Output:

👁 Screenshot-2023-07-05-160738

Example 4: Using max-width with initial

This example demonstrates resetting the max-width property to its initial (default) value using initial.

Output:

👁 Image

Example 5: Using max-width with inherit

In this example, the max-width value is inherited from the parent element, making the child element follow the same width constraints as its parent.

Output:

👁 Screenshot-2023-07-05-170626

Understanding and using the max-width property in CSS is essential for responsive design. It controls elements' maximum width, ensuring correct content display across all viewports, enhancing CSS skills, and creating adaptable, user-friendly layouts.

Supported Browsers: The browser supported by the max-width property are listed below: 

• Google Chrome 5.0
• Edge 12
• Mozilla 4.0
• Safari 5.0
• Opera 11.1