Width, height and overflow

Size by default

Left alone, browsers do something sensible: a block element is as wide as its container and as tall as its content. A paragraph grows when you add text; a card grows when you add items. A great deal of CSS skill is knowing when to not set a size.

When you do need to control size, you have six properties: width, height, min-width, max-width, min-height and max-height.

Width

.card    { width: 320px; }       /* fixed */
.sidebar { width: 25%; }         /* a quarter of the parent */
.hero    { width: 100vw; }       /* the viewport width */
.column  { max-width: 65ch; }    /* up to about 65 characters wide */

• Fixed widths do not adapt: a 600px box on a 360px phone scrolls sideways.
• Percentages follow the parent's width, which makes layouts flexible.
• max-width is the workhorse for readable content. The box can grow up to the limit and shrinks when the screen is narrower.

<style>
  .article { max-width: 360px; margin-inline: auto; background: #f1f5f9; padding: 16px; }
  .img { width: 100%; height: auto; background: #bae6fd; display: block; aspect-ratio: 16 / 9; }
</style>
<div class="article">
  <div class="img"></div>
  <p>Resize the preview: this column stays at most 360px wide and shrinks on small screens, and the image box follows with its 16:9 shape.</p>
</div>

min-width sets a floor, max-width a ceiling. Use width: min(100%, 600px) or clamp() when you want more control; both are available in all current browsers.

Height: usually let it be

Leave height as auto and the box fits its content. Fixed heights are tempting but fragile:

.card { height: 200px; }   /* what if the title wraps to three lines? */

Text wraps differently on a narrow screen, grows when the reader zooms or raises their font size, and is longer in many languages (German words and Hindi phrases can be much wider than English ones). A fixed height then cuts text off or lets it spill onto what comes next.

Better tools:

• min-height: 200px keeps a minimum but lets content push it taller.
• aspect-ratio: 16 / 9 keeps a shape for media boxes while the width flexes.
• padding gives breathing room around content without fixing the height.
• Viewport units for full-screen sections: min-height: 100dvh (the dvh unit tracks mobile browser toolbars).

Percent heights need a tall parent

height: 50% is a percentage of the parent's height. If the parent's height depends on its content (auto), the browser has nothing to take a percentage of and ignores it. Setting the heights up the chain, or using Flexbox/Grid, solves most cases.

overflow: when content doesn't fit

When content is bigger than its box (because you fixed a size, or a long word, or a wide image), overflow decides what happens:

<style>
  .box { width: 200px; height: 70px; border: 2px solid #4f46e5; margin: 8px 0; padding: 4px; }
  .v { overflow: visible; }
  .h { overflow: hidden; }
  .a { overflow: auto; }
</style>
<div class="box v">visible: this long text spills out of its box and overlaps what follows it on the page.</div>
<div class="box h">hidden: this long text is clipped at the edge of its box, so the rest cannot be read.</div>
<div class="box a">auto: this long text gets a scrollbar only when it needs one, so everything stays reachable.</div>

• visible (default): content spills out.
• hidden: clipped. Handy for rounded image containers; dangerous for text.
• scroll: always shows scrollbars.
• auto: scrollbars only if needed. The friendly choice for code blocks and wide tables: overflow-x: auto.

Two more helpers for text: overflow-wrap: anywhere breaks very long words (like URLs) so they do not burst out, and text-overflow: ellipsis (with white-space: nowrap; overflow: hidden) shows "…" for a single line that is too long.

Images and media

For responsive pictures use max-width: 100%; height: auto;, which keeps the image from exceeding its parent while preserving proportions. Setting width and height attributes in HTML as well lets the browser reserve space before the image loads.

Common mistakes

• Fixed heights on text containers, leading to clipped content.
• width: 100% plus padding without border-box, causing sideways scroll.
• overflow: hidden on the wrong parent, which hides dropdowns and focus rings.
• Using 100vw for full width, which includes the scrollbar and can add a horizontal scrollbar. Prefer 100% where you can.
• Setting both width and height on images and distorting them.

Exercise

Create a content column for an article that is centred, never wider than 70 characters, and has a code block that scrolls horizontally instead of overflowing.

<style>
  * { box-sizing: border-box; }
  .article { max-width: 70ch; margin-inline: auto; padding: 16px; }
  pre { overflow-x: auto; background: #111827; color: #f9fafb; padding: 12px; border-radius: 8px; }
</style>
<div class="article">
  <p>A short paragraph of text.</p>
  <pre>const message = "this is a very long line of code that would not fit in a narrow column";</pre>
</div>