CSS maxwidth Property (original) (raw)

CSS max-width Property

Last Updated : 11 Jul, 2025

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 `

max-width property 
<!-- max-width CSS property -->
<style>
    p {
        max-width: none;
        color: white;
        background-color: green;
    }
</style>
<p> GeeksforGeeks: A computer science portal </p>

`

**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 `

max-width property 
<!-- max-width CSS property -->
<style>
    p {
        max-width: 110px;
        color: white;
        background-color: green;
    }
</style>
<p> 
  GeeksforGeeks: A computer science portal 
</p>

`

**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 `

max-width property 
<!-- max-width CSS property -->
<style>
    p {
        max-width: 20%;
        color: white;
        background-color: green;
    }
</style>
<p>
    GeeksforGeeks: A computer science portal
</p>

`

**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 `

max-width property 
<!-- max-width CSS property -->
<style>
    p {
        max-width: initial;
        color: white;
        background-color: green;
    }
</style>
<p>
    GeeksforGeeks: A computer science portal
</p>

`

**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 `

max-width property 
<!-- max-width CSS property -->
<style>
    .container {
        max-width: inherit;
        color: white;
        background-color: green;
    }
</style>
<div class="container">
    <p>
        GeeksforGeeks: A computer science portal
    </p>
</div>

`

**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: