CSS Max-Width Property

The CSS max-width Property

The max-width property sets the largest width an element can have. The element can be narrower than this value, but never wider.

It is useful for responsive layouts and for keeping content readable across different screen sizes.

Problem with width: A centered <div> with a fixed width, such as 600px, will overflow when the browser window is narrower than that width, and the browser may add a horizontal scrollbar.

Using max-width instead: Setting max-width handles small windows better, because the element shrinks to fit instead of overflowing.

Example

One div uses a fixed width and the other uses max-width, so only the second one shrinks on a narrow window.

Prompt
An HTML page comparing a fixed width with max-width on two centered divs. In an internal <style> block, make div.ex1 with width 500px, margin auto, and a 3px solid green border; and div.ex2 with max-width 500px, margin auto, and the same border. Add a div of each class with text. On a narrow window, the fixed-width div overflows while the max-width div shrinks.
Output: complete HTML page

CSS Properties

A summary of the properties here:

  • max-width — sets the maximum width of an element.
  • width — sets the width of an element.