Runnable CSS Docs: Width and Height

Q: What is the difference between width: 100% and width: auto?

For a block element, auto fills the container including its padding and border. width: 100% sets the content width to the container's width, so under the default box-sizing: content-box any padding or border makes the element overflow.

Q: What is the difference between width and max-width?

width sets an exact size. max-width sets an upper limit: the element can be narrower, for example on a phone, but never wider. width: 100%; max-width: 600px; fills small screens and stops at 600px on large ones.

Q: How do I make an element full screen height?

Use min-height: 100vh (or 100dvh so mobile browser toolbars are accounted for). min-height rather than height lets the section grow if its content is taller than the screen.

Setting width and height

width and height set the size of an element's content box. By default the padding and border are added outside that size.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

The box is 260 by 100 pixels: 240 by 80 of content plus 10px of padding on each side. With box-sizing: border-box, it would be exactly 240 by 80; the box model page explains both.

Values

Value	Example	Meaning
`auto`	`width: auto`	The default. Blocks fill their container's width; height fits the content
Length	`300px`, `20rem`	A fixed size
Percentage	`50%`	Of the containing block's width (for `width`) or height (for `height`)
Viewport units	`100vh`, `50vw`, `100dvh`	Of the browser window
`min-content`	`width: min-content`	As narrow as possible, the longest word decides
`max-content`	`width: max-content`	As wide as the content on one line
`fit-content`	`width: fit-content`	Like `max-content`, but never wider than the container

Why height: 100% does nothing

A percentage height needs a parent with a definite height to be a percentage of. When the parent's height is auto, which is the normal case, the child's height: 100% behaves as auto too.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

The first child is only as tall as its text. The second fills its parent because the parent has a height. To make a whole page chain work with percentages, every ancestor up to html and body needs a height, which is why most layouts use flexbox or grid instead: their children stretch to fill without any percentage.

min-height and max-width: sizes that bend

Fixed sizes break easily: a fixed height overflows when the text is longer than expected, and a fixed width is too wide for a phone. The min- and max- properties set limits instead of exact sizes.

Property	Meaning
`min-width`	Never narrower than this
`max-width`	Never wider than this
`min-height`	Never shorter than this, but can grow
`max-height`	Never taller than this (extra content overflows)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

On a screen narrower than 360px, such as a phone, the cards shrink with it, because max-width is only a ceiling.

When both a size and a limit apply, the limits win: max-width beats width, and min-width beats max-width.

width: auto vs width: 100%

For a block element, leaving width at auto is almost always what you want. auto fits the whole box, padding and border included, into the container. 100% makes the content as wide as the container and then adds the padding and border on top:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% is still useful on elements that are not blocks by default (an <input>, an <img>, an inline-block), ideally together with box-sizing: border-box.

Sizing to the content: fit-content

To make a block only as wide as its text, without switching it to inline-block, use fit-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content with margin-inline: auto centers a label or a button-like block that stays exactly as wide as its text.

Full-height sections and viewport units

vh is 1% of the viewport height and vw 1% of its width. On phones, the browser's address bar grows and shrinks as you scroll, so 100vh can be taller than what you see. The dynamic unit dvh follows the visible area, and svh uses the smallest visible height:

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

Use min-height, not height, for full-screen sections, so a small screen with a lot of text still gets a section that grows. A fixed height with content that does not fit spills out, which is what the CSS overflow page handles.

Common mistakes

height: 100% inside a parent with no height. It acts as auto. Give the parent a height or use flex or grid.
width: 100% plus padding. The element overflows its container. Leave block widths at auto, or use box-sizing: border-box.
Fixed heights on text containers. Use min-height so longer text or a bigger font does not spill out.
width on an inline element. <span> and <a> ignore width and height; make them inline-block or block.
width: 1200px on a page wrapper. It scrolls sideways on every phone. Use max-width: 1200px instead.

Frequently Asked Questions

Why is height: 100% not working?

A percentage height is a percentage of the parent's height, and it only works when that height is definite. If the parent's height is auto (sized by its content), the percentage is treated as auto. Give the parent a height, or use flexbox or grid, which stretch children without percentages.

What is the difference between width: 100% and width: auto?

For a block element, auto fills the container including its padding and border. width: 100% sets the content width to the container's width, so under the default box-sizing: content-box any padding or border makes the element overflow.

What does min-height do in CSS?

It sets the smallest height an element may have while still letting it grow with its content. min-height: 200px gives an empty card 200px, and a card with more text becomes taller instead of overflowing, which a fixed height would not allow.

What is the difference between width and max-width?

width sets an exact size. max-width sets an upper limit: the element can be narrower, for example on a phone, but never wider. width: 100%; max-width: 600px; fills small screens and stops at 600px on large ones.

How do I make an element full screen height?

Use min-height: 100vh (or 100dvh so mobile browser toolbars are accounted for). min-height rather than height lets the section grow if its content is taller than the screen.

Related concepts