Width, Height and Overflow

Control element sizing with width, min/max constraints, and manage content that doesn't fit its box using the overflow family of properties.

Setting a fixed width and height is only half the story of sizing an element — real interfaces need to respond to varying amounts of content and varying screen sizes. This lesson covers the min/max sizing properties that let boxes flex within safe bounds, and the overflow properties that decide what happens when content refuses to fit inside its box.

width, min-width, and max-width

width sets a target size, but it can be overridden by min-width and max-width, which act as hard floors and ceilings. min-width guarantees an element never shrinks below a certain size, even in a narrow container — useful for keeping buttons or form fields legible. max-width guarantees an element never grows past a certain size even if its container is huge — the single most common use is max-width: 100% on images, so they never overflow their parent, and max-width: 1200px on a page wrapper, so text doesn't stretch to unreadable line lengths on ultra-wide monitors.

When min-width, width, and max-width conflict, the browser resolves them in a fixed priority: min-width always wins over max-width, and max-width always wins over width. So width: 50px; min-width: 100px; renders at 100px, and width: 2000px; max-width: 500px; renders at 500px.

• width — the preferred/target size • min-width — a floor; the box will never render smaller than this • max-width — a ceiling; the box will never render larger than this • Same three properties exist for the vertical axis: height, min-height, max-height

The overflow family

overflow decides what happens when content is too big for its box. The default value, visible, lets content spill outside the box's boundaries uncontained — it's rarely what you want in a real layout since it can visually overlap neighboring elements. hidden clips anything that doesn't fit and simply throws it away visually (it still exists in the DOM, just not painted). scroll always adds scrollbars, even if the content actually fits — reserving the scrollbar space up front so it doesn't cause layout shift when content changes. auto is the smart middle ground: it adds a scrollbar only if and when the content actually overflows.

overflow-x and overflow-y let you control each axis independently — for example, a horizontally scrolling image gallery might use overflow-x: auto; overflow-y: hidden; so it scrolls sideways but never grows a vertical scrollbar.

• visible (default) — content spills out, unclipped • hidden — content outside the box is clipped and invisible • scroll — scrollbars always shown, on both axes unless overridden by overflow-x/-y • auto — scrollbars appear only when needed

Sizing and Overflow Properties

Percentage widths are resolved against the containing block's width max-height combined with overflow: auto is the classic recipe for a scrollable panel

.box {
  width: 100%;
  max-width: 600px;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

Code Examples

This is one of the most-used CSS rules on the web. max-width: 100% ensures an image never exceeds its container's width, and height: auto lets the browser scale the height proportionally, preserving the image's aspect ratio instead of stretching it.

width: 100% lets the column fill narrow screens, while max-width: 720px caps its size on wide screens so paragraph lines never stretch past a comfortable reading length. margin: 0 auto centers the capped box horizontally.

A fixed height combined with overflow-y: auto means the panel stays exactly 300px tall no matter how many messages accumulate — a vertical scrollbar appears automatically once content exceeds that height, while overflow-x: hidden prevents any long unbroken word from creating an unwanted horizontal scrollbar. Expected result: A 300px-tall box that grows a scrollbar only after its content exceeds 300px of height.

img {
  max-width: 100%;
  height: auto;
}

.article {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.chat-log {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #ddd;
  padding: 12px;
}

Important Rules

Sizing priority when values conflict: min-width/min-height beats max-width/max-height, which beats width/height.

overflow: hidden clips content visually but does not remove it from the DOM or from accessibility tools.

overflow: auto is almost always preferable to overflow: scroll, since it avoids showing empty scrollbars when content already fits.

max-width: 100% on images is close to a universal default in responsive design.

Why this matters on real projects

Dashboards, chat widgets, and dropdown menus all rely on max-height + overflow-y: auto to stay a fixed, predictable size on the page while still supporting unpredictable amounts of dynamic content. Get this wrong and you either get content silently clipped and lost (overflow: hidden with no scroll) or panels that grow unboundedly and push the rest of the page layout around..gallery { overflow: scroll; }.gallery { overflow: auto; } overflow: scroll forces scrollbars on both axes permanently, even when content fits — producing dead, always-visible scrollbars on large screens. overflow: auto shows them only when actually needed.

[Multiple Choice] An element has width: 50px; and min-width: 150px; set at the same specificity. What width does it render at? A. 50px, because width was declared B. 150px, because min-width overrides width when they conflict C. It's invalid CSS and the browser ignores both D. 100px, the average of the two

B. 150px, because min-width overrides width when they conflict — min-width (and min-height) always take precedence over width/height when they conflict — they act as a hard floor the browser will not shrink the box below, regardless of the plain width value.

Build a.sidebar that is at least 200px wide, at most 350px wide, fills available space in between (width: 100%), and scrolls vertically if its content exceeds 500px tall..sidebar { width: 100%; min-width: 200px; max-width: 350px; max-height: 500px; overflow-y: auto; }

Combine min-width/max-width with width: 100%, and pair max-height with overflow-y: auto.