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
Change the maximum width.
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