CSS max-width Property

Last Updated : 18 Sep, 2024

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.

Value	Description
none	Default value without setting a maximum width.
length	Sets the maximum width using a specific length unit like pixels (px), centimeters (cm), etc.
percentage	Sets the maximum width as a percentage of the containing element's width.
initial	Sets the property to its default value.
inherit	Inherits the property value from its parent element.

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>max-width property</title>

    <!-- max-width CSS property -->
    <style>
        p {
            max-width: none;
            color: white;
            background-color: green;
        }
    </style>
</head>

<body>

    <p> GeeksforGeeks: A computer science portal </p>

</body>

</html>

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>max-width property</title>

    <!-- max-width CSS property -->
    <style>
        p {
            max-width: 110px;
            color: white;
            background-color: green;
        }
    </style>
</head>

<body>

    <p> 
      GeeksforGeeks: A computer science portal 
    </p>

</body>

</html>

Output:

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>max-width property</title>

    <!-- max-width CSS property -->
    <style>
        p {
            max-width: 20%;
            color: white;
            background-color: green;
        }
    </style>
</head>

<body>

    <p>
        GeeksforGeeks: A computer science portal
    </p>

</body>

</html>

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>max-width property</title>

    <!-- max-width CSS property -->
    <style>
        p {
            max-width: initial;
            color: white;
            background-color: green;
        }
    </style>
</head>

<body>

    <p>
        GeeksforGeeks: A computer science portal
    </p>

</body>

</html>

Output:

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>max-width property</title>

    <!-- max-width CSS property -->
    <style>
        .container {
            max-width: inherit;
            color: white;
            background-color: green;
        }
    </style>
</head>

<body>

    <div class="container">
        <p>
            GeeksforGeeks: A computer science portal
        </p>
    </div>

</body>

</html>

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: