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

Media

Visual

Computed value

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

Animatable

Yes

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.maxWidth

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;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
7	12	1	1	4	1
Tablets / Mobile
4.4	18	4	14	1	1.0

Last updated by CSSPortal on: 15th April 2022