CSS max-width Property

Description

The max-width property sets the maximum width of the element. The element width value will be calculated depending on the values ​​of the set properties width, max-width and min-width.

Initial value

none

Applies to

All elements except non-replaced inline elements and table elements

Inherited

No

Computed value

The percentage as specified or the absolute length or 'none'

Animatable

Yes

JavaScript syntax

object.style.maxWidth

Interactive Demo

max-width: 150px;

max-width: 20em;

max-width: 20%;

max-width: 20ch;

Syntax

max-width: [ [<length> | <percentage>] && [border-box | content-box]? ] | available | min-content | max-content | fit-content | none

Values

• <length>Specifies a fixed width. Negative values are not allowed.
• <percentage>A percentage relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.
• max-contentThe max-content width or height.
• min-contentThe min-content width or height.
• availableThe containing block width or height minus margin, border, and padding.
• fit-contentIf the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
• noneThe width has no maximum value.

Example

<div class="test">The block in which the minimum width is set to 100px.</div> 

<br> 

<div class="test2">The block in which the minimum width is 100px and the maximum is 200px ..</div> 

.test {
   min-width: 100px;
   background: khaki; 
}
.test2 {
   min-width: 100px;
   max-width: 200px;
   background: orange;
}

Browser Support

The following table will show you the current browser support for the CSS max-width property.

Desktop
12	1	1	4	1

Tablets / Mobile
18	4	14	1	1	4.4

Last updated by CSSPortal on: 2nd January 2024