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

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