Sizing: width, min/max-width

Syntax

width: value;
min-width: value;
max-width: value;

Examples

.container {
  width: 100%;       /* fills available space on small screens */
  max-width: 1200px;  /* but never grows beyond this on large screens */
  margin: 0 auto;      /* centers it once max-width is reached */
  padding: 0 16px;
}

.sidebar {
  flex: 1;
  min-width: 200px; /* will not shrink below this, even in a tight flex container */
}

Parameters and values

• width / height (length | % | auto): Sets a specific dimension
• min-width / min-height (length): Sets a lower bound the element cannot shrink below
• max-width / max-height (length): Sets an upper bound the element cannot grow beyond

Best practices

• Use max-width: 100% on images so they never overflow their container on smaller screens, a near-universal responsive image rule
• Prefer max-width over a fixed width for content containers, letting them shrink gracefully on smaller screens
• Use min-width on flex/grid items to prevent them from becoming unreadably narrow when space is constrained
• Combine width: 100% with max-width for the classic fluid-but-capped container pattern used in most responsive layouts

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

Specifications & further reading

• CSS specifications (modules)

Related CSS documentation