Viewport Units, Container Units and Size Limits

What Is It?

Relative units let a component respond to text, viewport, or query-container dimensions. Minimum and maximum properties constrain those fluid values.

Properties, Tags and Attributes Explained

• svh / lvh / dvh: Use the small, large, or dynamic viewport height, useful around mobile browser interface changes.
• vmin / vmax: One percent of the smaller or larger viewport dimension.
• ch / ex: Font-relative measures based on the zero glyph advance or x-height.
• cqw / cqi: One percent of query container width or inline size; without a suitable container they fall back to the relevant small viewport unit.
• min-width / max-width / min-height / max-height: Constrain physical box dimensions.
• min-inline-size / max-inline-size: Constrain dimensions along the logical inline axis.

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: Limit line length

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Viewport Units, Container Units and Size Limits</title>
  <style>
    .demo { max-inline-size: 45ch; padding: 16px; background: #eff6ff; }
  </style>
</head>
<body>
  <p class="demo">A character-based maximum gives text a comfortable measure while still allowing the panel to shrink when there is less space.</p>
</body>
</html>

What you see: The text panel is capped using a font-relative measure, rather than a fixed viewport fraction.

Example 2: Scale inside a container

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Viewport Units, Container Units and Size Limits</title>
  <style>
    .host { container-type: inline-size; width: min(100%, 360px); }
    h2 { font-size: clamp(1rem, 8cqi, 2rem); }
  </style>
</head>
<body>
  <div class="host"><h2>Container-sized heading</h2><p>The font follows this host.</p></div>
</body>
</html>

What you see: The preferred font size follows the query container inline size and stays within limits.

Example 3: Dynamic viewport panel

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Viewport Units, Container Units and Size Limits</title>
  <style>
    .demo { min-height: 30dvh; background: #dcfce7; padding: 16px; box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="demo">At least 30% of the dynamic viewport height.</div>
</body>
</html>

What you see: The panel responds to its preview viewport height. A real mobile browser can show changes as browser chrome expands or retracts.

When and Where to Use It

Use ch for approximate reading widths, dvh for mobile viewport panels, and container units for reusable component typography.

Common Mistake or Useful Tip

ch is not an exact character count for proportional fonts. Avoid fixed viewport heights that prevent content growing.

Try It Yourself

Change the heading host width from 360px to 200px and compare font sizing.