CSS max-width Property

The max-width property sets the maximum width of an element, preventing it from growing larger than a specified value.

selector { max-width: value; }
none The default value that ensures no maximum width limit is applied to the element.
<length> Sets a fixed maximum width using specific units like px, em, rem, or vh.
<percentage> Defines the maximum width as a percentage of the containing block's width.
max-content The intrinsic preferred width based on the content inside the element.
min-content The intrinsic minimum width, often determined by the longest word or element.
fit-content() Uses the available space but never exceeds a specified maximum value.
initial Sets the property to its default value of none.
inherit Adopts the max-width value from the parent element.

Code Examples

A basic responsive container that centers itself and stops growing at 800px.

<div style="width: 100%; max-width: 800px; margin: 0 auto; background: #e0e0e0; padding: 20px;">
  <p>This container is fluid until it reaches 800px. Resize your browser to see it in action.</p>
</div>

An advanced example using JavaScript and CSS transitions to smoothly animate the max-width property.

<div id="dynamicBox" style="width: 100%; max-width: 1000px; background: #333333; color: #ffffff; padding: 20px; transition: max-width 0.5s;">
  <p>Click the button to toggle the maximum width constraint using JavaScript.</p>
  <button onclick="toggleWidth()">Toggle Max Width</button>
</div>

<script>
function toggleWidth() {
  const box = document.getElementById("dynamicBox");
  if (box.style.maxWidth === "1000px") {
    box.style.maxWidth = "400px";
  } else {
    box.style.maxWidth = "1000px";
  }
}
</script>

Pro Tip

You can use the 'ch' unit with 'max-width' to create the perfect reading experience. Setting 'max-width: 65ch' ensures that no matter what font size the user chooses, the line length will stay at roughly 65 characters wide, which is the sweet spot for readability.

Deep Dive

Think of max-width like a leash on a dog. The dog (your element) can move around freely and be as small as it wants, but once it hits the length of that leash, it can't go any further. It effectively overrides the 'width' property if 'width' is set to a larger value than 'max-width'. This is the foundation of responsive design. When you set an image to 'max-width: 100%', it tells the browser: 'Stay as big as you naturally are, but if your container gets smaller than you, shrink down so you do not burst out of the walls'. It applies to block-level elements and replaced elements like images, but it has no effect on non-replaced inline elements like a standard span.

Best Practices

Always apply 'max-width: 100%' and 'height: auto' to images and videos to prevent them from breaking your layout on mobile devices. Use 'max-width' on text containers to prevent lines of text from becoming too long on wide monitors, which strains the eyes. It is usually better to use 'max-width' for layout containers rather than a fixed 'width' to ensure the site stays fluid and accessible across different device sizes.

Common Pitfalls

The most common headache occurs when you forget about 'box-sizing'. If your 'box-sizing' is set to 'content-box', any padding or borders you add will be tacked on outside of your 'max-width', making the element wider than you intended. Use 'box-sizing: border-box' to keep your math simple. Also, remember that 'max-width' will always override 'width' if 'width' is larger, but 'min-width' will always override 'max-width'.

Accessibility

Setting a 'max-width' on paragraphs and articles is a huge win for accessibility. Humans find it difficult to track lines of text that span across an entire wide-screen monitor. By limiting text containers to a 'max-width' of about '70ch' or '80ch' (character units), you make the content much easier to read for everyone, especially those with visual or cognitive impairments.

Dev Data Table: max-width property

default none
animatable yes
inherited no
experimental no
year_intro 1998
year_standard 2000
js_syntax_1 element.style.maxWidth = "500px";
js_syntax_2 element.style.setProperty("max-width", "500px");
js_note In JavaScript, the property is camelCased as maxWidth when accessing the style object directly.
browsers { "Chrome": "1", "Edge": "12", "Firefox": "1", "Safari": "1", "Opera": "7", "Chrome Android": "18", "Safari on iOS": "1", "Samsung Internet": "1.0", "Opera Mobile": "10" }
results render here...