Width, Height and Overflow

What Is It?

CSS has six physical sizing properties: width, height, min-width, max-width, min-height, and max-height. Width and height request a size; minimum and maximum properties constrain it. Overflow controls content that does not fit. This lesson covers each property separately, then their logical equivalents.

Properties, Tags and Attributes Explained

• width: Requests the box width. auto lets layout determine it; lengths such as 240px and percentages such as 80% are common. In ordinary block layout, percentage width relates to the containing block width.
• height: Requests the box height. auto normally follows content in ordinary block flow. A fixed length does not automatically grow when content is taller. Percentage heights usually require a definite containing block height.
• min-width: Sets the lower width limit, such as 180px. The default auto has layout-dependent behavior, particularly for flex and grid items; min-width: 0 can allow those items to shrink below their content-based automatic minimum.
• max-width: Sets the upper width limit, such as 36rem or 100%. The initial value none means no maximum. max-width can reduce a larger requested width.
• min-height: Sets the lower height limit. It reserves a minimum amount of space while allowing an auto-height box to grow with content. The initial auto has layout-dependent behavior.
• max-height: Sets the upper height limit. The initial value none means no maximum. It does not by itself hide excess content: combine it with an intentional overflow behavior.
• box-sizing: content-box makes width and height describe the content box, with padding and borders added outside. border-box includes padding and borders in the declared dimensions and size constraints. Margin remains outside.
• overflow: Shorthand for overflow-x and overflow-y. visible paints excess content outside; hidden clips and still allows programmatic scrolling; clip clips without creating a scroll container; auto allows scrolling when needed; scroll requests scrolling even without overflow, subject to browser scrollbar behavior.
• overflow-x: Controls horizontal overflow. Useful for wide tables or code lines that should scroll sideways.
• overflow-y: Controls vertical overflow. Useful for lists constrained by height or max-height. When one axis uses a scrollable value, visible on the other axis can compute to auto.
• overflow-wrap: anywhere permits long unbroken text to wrap and helps narrow content avoid horizontal overflow. It controls text breaking, rather than box dimensions.
• inline-size: Logical equivalent of width in horizontal writing mode; it follows the inline axis in other writing modes.
• block-size: Logical equivalent of height in horizontal writing mode; it follows the block axis in other writing modes.
• min-inline-size: Minimum size along the inline axis; usually corresponds to min-width in horizontal writing.
• max-inline-size: Maximum size along the inline axis; usually corresponds to max-width in horizontal writing.
• min-block-size: Minimum size along the block axis; usually corresponds to min-height in horizontal writing.
• max-block-size: Maximum size along the block axis; usually corresponds to max-height in horizontal writing.
• div / p: HTML tags used for a generic demo box and paragraphs. class connects each box to its CSS selector.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: width: choose a horizontal size

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { width: 220px; padding: 12px; box-sizing: border-box; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="box">A 220px-wide box, including padding.</div>
</body>
</html>

What you see: The box requests 220px of horizontal space. Use width for a known-size component; add a maximum constraint when it must fit small containers.

Example 2: height: choose a vertical size

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { height: 100px; padding: 12px; box-sizing: border-box; background: #dcfce7; }
  </style>
</head>
<body>
  <div class="box">A 100px-tall box.</div>
</body>
</html>

What you see: The box is 100px tall despite the short content. Use a definite height for a controlled viewport or visual frame; prefer natural height for ordinary text.

Example 3: min-width: stop a box becoming too narrow

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .track { width: 140px; padding: 8px; border: 2px dashed #64748b; }
    .box { width: 100%; min-width: 200px; box-sizing: border-box; padding: 12px; background: #fde68a; }
  </style>
</head>
<body>
  <div class="track"><div class="box">Minimum width: 200px</div></div>
</body>
</html>

What you see: The box stays 200px wide even though its parent content width is only 140px, so it extends beyond the parent. Use a minimum when content requires room, and plan for narrow screens rather than accidentally introducing overflow.

Example 4: max-width: cap a fluid panel

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { width: 100%; max-width: 320px; margin-inline: auto; box-sizing: border-box; padding: 16px; background: #e0e7ff; }
  </style>
</head>
<body>
  <div class="box">Full available width, up to 320px.</div>
</body>
</html>

What you see: The panel shrinks in a narrow preview and stops growing at 320px. Use this pattern for reading panels, forms, and cards.

Example 5: min-height: reserve space and still grow

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { min-height: 100px; padding: 12px; box-sizing: border-box; background: #dcfce7; margin-bottom: 12px; }
    p { margin: 8px 0; }
  </style>
</head>
<body>
  <div class="box">Short content still gets at least 100px.</div><div class="box"><p>First line</p><p>Second line</p><p>Third line</p><p>Fourth line</p><p>Fifth line</p></div>
</body>
</html>

What you see: The first box reserves 100px; the second grows taller to fit its paragraphs. Use min-height for empty states, cards, or sections whose content can vary.

Example 6: max-height: cap a list and scroll

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { max-height: 110px; overflow-y: auto; padding: 12px; box-sizing: border-box; border: 1px solid #64748b; background: #eff6ff; }
    p { margin: 8px 0; }
  </style>
</head>
<body>
  <div class="box" tabindex="0" role="region" aria-label="Scrollable lesson list"><p>Selectors</p><p>Colors</p><p>Spacing</p><p>Flexbox</p><p>Grid</p><p>Responsive design</p></div>
</body>
</html>

What you see: The list grows only up to 110px and then scrolls vertically. Use this for bounded menus or logs while keeping all content reachable. Remove paragraphs to see that max-height alone does not force a short list to 110px.

Example 7: Combine width with minimum and maximum

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { width: 70%; min-width: 160px; max-width: 360px; box-sizing: border-box; padding: 12px; background: #fef3c7; }
  </style>
</head>
<body>
  <div class="box">70% preferred width, constrained between 160px and 360px.</div>
</body>
</html>

What you see: On a wide container the maximum caps the width. On a narrow container the minimum stops it shrinking below 160px, which can overflow a parent narrower than that. Use combined limits when both lower and upper bounds are intentional.

Example 8: Conflicting limits: the minimum wins

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { width: 180px; min-width: 240px; max-width: 200px; box-sizing: border-box; padding: 12px; background: #fee2e2; }
  </style>
</head>
<body>
  <div class="box">Minimum 240px; maximum 200px.</div>
</body>
</html>

What you see: The minimum wins the conflicting constraints, so the box uses 240px. The same minimum-over-maximum rule applies to min-height and max-height. Avoid conflicting bounds in real components.

Example 9: Percentage height with a definite parent

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .parent { height: 180px; background: #e2e8f0; }
    .box { height: 50%; padding: 12px; box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="parent"><div class="box">50% of the parent: 90px</div></div>
</body>
</html>

What you see: Because the parent has a definite 180px height, the child resolves 50% to 90px. Use percentage heights when the containing size is defined; do not assume 100% means the full screen.

Example 10: overflow-x: scroll wide content

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { width: 220px; max-width: 100%; overflow-x: auto; border: 1px solid #64748b; }
    pre { margin: 0; padding: 12px; }
  </style>
</head>
<body>
  <div class="box" tabindex="0" role="region" aria-label="Scrollable code"><pre>A single very long code line that stays on one line instead of wrapping.</pre></div>
</body>
</html>

What you see: The narrow region scrolls horizontally while the code preserves its line. Use this for wide code or tables that should not be squeezed.

Example 11: Logical width and height constraints

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width, Height and Overflow</title>
  <style>
    .box { inline-size: 100%; min-inline-size: 120px; max-inline-size: 320px; block-size: auto; min-block-size: 90px; max-block-size: 140px; box-sizing: border-box; padding: 12px; overflow: auto; background: #e0e7ff; }
  </style>
</head>
<body>
  <div class="box"><p>Logical sizing</p><p>These constraints follow the writing axes.</p><p>Add paragraphs to test the maximum block size.</p></div>
</body>
</html>

What you see: In horizontal writing, inline constraints act like width constraints and block constraints act like height constraints. Use these names for direction-aware components.

When and Where to Use It

Choose width or height for a requested dimension, min-width or min-height for a lower bound, and max-width or max-height for an upper bound. Common combinations: width: 100% with max-width for a responsive form; min-height with height: auto for variable text; max-height with overflow-y: auto for a bounded list. The example explanations give the scenario for each property. For content-based values such as min-content, max-content, fit-content, and aspect-ratio, continue to Intrinsic Sizing, Aspect Ratio and Centering. For px, rem, percentages, and viewport units, see CSS Units.

Common Mistake or Useful Tip

Do not confuse a requested height with a minimum height: fixed height can leave text overflowing while min-height allows growth. A maximum size does not automatically clip or scroll content. A minimum greater than a maximum wins, which can cause overflow. Ordinary inline text elements do not accept width and height like block boxes; use an appropriate display type. These properties also accept global keywords such as inherit, initial, unset, revert, and revert-layer, explained in Cascade Layers and Global Keywords.

Try It Yourself

In the max-height example, replace max-height with min-height, then with height, keeping 110px each time. Compare growth and scrolling. Next remove overflow-y: auto to see why a size constraint alone does not keep excess content inside. In the combined-width example, resize the editor window and explain which of the three constraints controls the box.