1. css
  2. /properties
  3. /max-width

max-width

Definition

The max-width property sets the maximum width that an element can have. If the element's content is larger than the specified max-width, the overflow will be clipped. This property is often used in conjunction with overflow to control how content that overflows an element is handled.

Examples

Setting a maximum width for a div element:

div {
  max-width: 800px;
  overflow: auto;
}

Setting a maximum width for an image element:

img {
  max-width: 100%;
  height: auto;
}

Setting a maximum width for a table element:

table {
  max-width: 1000px;
  overflow-x: scroll;
}

Values

ValueDescription
noneDefault value. The element can be sized as large as necessary
<length>Specifies the maximum width in pixels, or other absolute or relative units
<percentage>Specifies the maximum width as a percentage of the containing block
min-contentThe intrinsic minimum width of the element.
max-contentThe intrinsic maximum width of the element.
`fit-content(<length><percentage>)`
fill-availableThe element should fill the available horizontal space in its parent.
inheritInherits the max-width property from the parent element.
initialSets the max-width property to its default value.
unsetInherits the max-width property from the parent element, or sets it to its default value if there is no parent.

Best Practices

  • Use max-width with overflow to control how content that exceeds the maximum width of an element is handled.
  • Avoid using max-width on elements that need to grow dynamically to fit their content, such as text blocks. Use width instead, or consider setting a minimum width with min-width.
  • Use relative units like % and em instead of absolute units like px to ensure that the element scales appropriately across different devices.
  • When using max-width on tables, ensure that the table header and footer are visible and that the table body scrolls, not the entire table.
  • Test your code in multiple browsers to ensure cross-browser compatibility.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes