CSS Height, Width and max-width

CSS width and height set the size of a box. Learn auto, percentages, min-width, max-width, fit-content and max-content, and how max-width keeps text easy to read.

How do width and height work in CSS?

The width and height properties set the size of an element's content box (or its border box with box-sizing: border-box). Their default value is auto, and auto behaves differently for width and height:

• width: auto on a block element means "fill all the space available in the parent". A <div> stretches from left to right on its own.
• height: auto means "be as tall as the content inside". Add more text and the box grows.

That's why you rarely need to set a height. Let the content decide, and your boxes never overflow.

.banner {
  width: 100%;
  height: 200px;
  background: #0f172a;
  color: white;
}

This banner is as wide as its parent and exactly 200px tall. If you put a lot of text in it on a small phone, the text may spill out of the bottom, because the height is fixed. That's the risk of fixed heights.

Percentages: relative to the parent

A percentage width is a share of the parent's content width. width: 50% is half the parent. This is how you build flexible boxes:

<div class="row">
  <div class="col main">Main content</div>
  <div class="col side">Sidebar</div>
</div>

* { box-sizing: border-box; }

.row { display: flex; }
.col { padding: 16px; }
.main { width: 70%; background: #eff6ff; }
.side { width: 30%; background: #fef3c7; }

The main area takes 70% and the sidebar 30% of the row, at any screen size. If the window gets wider, both boxes grow.

Percentage heights are trickier. height: 50% only works if the parent has a fixed height. If the parent's height is auto, the browser can't calculate half of it, and the percentage is ignored. For full-screen sections, use viewport units like min-height: 100vh (or 100dvh on mobile) instead.

min-width, max-width, min-height and max-height

These four properties set limits. The box can be flexible, but only inside the limits you set.

Property	Meaning
min-width	Never narrower than this.
max-width	Never wider than this.
min-height	Never shorter than this, but can grow taller.
max-height	Never taller than this. Extra content overflows.

When they disagree, min-width wins over max-width, and both win over width.

max-width is the hero of responsive design. Compare these two:

.box-fixed { width: 800px; }
.box-flexible { max-width: 800px; }

On a big screen, both are 800px. On a 400px phone, the fixed box is still 800px and makes the page scroll sideways. The flexible box shrinks to fit the screen. Use max-width for containers and min-height (not height) for sections, so content always fits.

Common mistake: Giving a card height: 300px so all cards match. When one card has more text, it overflows. Use min-height: 300px instead, or let flexbox or grid make the cards equal height.

Intrinsic sizes: fit-content, min-content and max-content

So far we've used sizes you choose. CSS also has keywords that size a box based on its content. These are called intrinsic sizes.

• max-content: as wide as the content wants to be with no line breaks. A long sentence stays on one line.
• min-content: as narrow as possible. Text wraps at every chance, so the box is as wide as the longest single word.
• fit-content: like max-content, but never wider than the available space. It shrinks to the content and wraps only if it must.

<p class="pill">Free shipping on all orders</p>
<figure class="photo">
  <img src="https://picsum.photos/id/1025/300/200" alt="A small dog wrapped in a blanket">
  <figcaption>Our office dog, Max, on a cold morning in the garden.</figcaption>
</figure>

.pill {
  width: fit-content;
  margin: 0 auto;
  padding: 6px 14px;
  background: #fde68a;
  border-radius: 999px;
}

.photo {
  width: min-content;
  margin: 0 auto;
}

The pill is a block element, but width: fit-content makes it only as wide as its text, so margin: 0 auto can center it. The figure uses min-content, so it is as wide as the image (the widest thing inside it that can't break). The caption wraps under the photo instead of stretching wider than it.

Note: If you want a box with a fixed shape, like a square avatar or a 16:9 video, set the width and use aspect-ratio instead of a height. You'll find it in the Modern Layout Tricks lesson.

Readable line length with max-width

Long lines of text are tiring to read. Your eyes lose their place when they jump back to the start of the next line. Most typographers recommend about 45 to 75 characters per line. The ch unit (the width of the "0" character) makes this easy:

article {
  max-width: 65ch;
  margin: 0 auto;
  padding: 0 16px;
  line-height: 1.6;
}

On a wide monitor, the article stays a comfortable 65 characters wide in the middle of the screen. On a phone, it fills the width, with 16px of padding so the text doesn't touch the edges. This one rule makes blog posts and documentation much nicer to read.

Practice exercise

Build a page with a full-width header, a centered article limited to 65ch, and a row of three cards below. Give the cards a min-height instead of a height, and put much more text in one card to check that nothing overflows. Finally, add a "Back to top" label centered with width: fit-content.

Hint: shrink your browser window to phone width and check that there is no sideways scrolling.

Key takeaways

• width: auto fills the parent; height: auto fits the content. Usually leave height alone.
• Percentage widths are relative to the parent; percentage heights need a parent with a fixed height.
• Prefer max-width and min-height over fixed width and height.
• fit-content, min-content and max-content size a box from its content.
• max-width: 65ch keeps paragraphs at a comfortable reading length.