Codectionary / Developer documentation / CSS

Sizing: width, min/max-width

Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.

Syntax

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

Examples

A Responsive Container Pattern

The extremely common "fluid but capped" content container.

/* Demo setup: sizing, structure or neutral surfaces. */
.container{border:2px solid #0f766e;padding:1rem;box-sizing:border-box}

.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;
}
  1. The container fills available width until its maximum is reached.
  2. Auto horizontal margins distribute spare space outside a constrained container.
  3. Resize the preview to compare the narrow and wide states.
HTML used by this example
<main class="container"><h3>A constrained reading width</h3><p>Readable columns need a useful maximum width as well as room to shrink. Readable columns need a useful maximum width as well as room to shrink. Readable columns need a useful maximum width as well as room to shrink. Readable columns need a useful maximum width as well as room to shrink. Readable columns need a useful maximum width as well as room to shrink. </p></main>

min-width to Prevent Squishing

Ensuring a flex item never becomes too narrow to be usable.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-flex{display:flex;gap:1rem;max-width:18rem;border:1px solid #94a3b8}.sidebar{background:#fef3c7;color:#422006;padding:1rem}

.sidebar {
  flex: 1;
  min-width: 200px; /* will not shrink below this, even in a tight flex container */
}
  1. The sidebar is an actual flex item in a constrained row.
  2. min-width limits how far it can shrink, even when that causes overflow.
  3. A minimum width is a constraint, not a guarantee that every viewport can fit all siblings.
HTML used by this example
<div class="preview-flex"><aside class="sidebar">This sidebar keeps its minimum width.</aside><main>Other content</main></div>

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

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading