Viewport units in CSS - Browser Rendering Trace

Render Flow - Viewport units

Parse CSS

→Identify viewport units (vw, vh, vmin, vmax)

↓

Compute element sizes based on viewport units

↓

Apply sizes to elements

→Layout

The browser reads CSS, detects viewport units, calculates the viewport size, then computes element sizes relative to that viewport before laying out and painting the page.

Render Steps - 6 Steps

Code Added:<div class="box">Viewport unit box</div>

Before

→

After

[box]
|Viewport unit box|
[     empty     ]

Adding the div element with text creates a visible box with default size and inline layout.

🔧 Browser Action:Creates DOM node and renders default inline box

Code Sample

A blue box sized to half the viewport width and 30% of the viewport height, centered text inside.

CSS

<div class="box">Viewport unit box</div>

CSS

.box {
  width: 50vw;
  height: 30vh;
  background-color: #4a90e2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 3 (height: 30vh), what happens to the box's height?

A It stays the default height

B It becomes 30% of the viewport height

C It becomes 30% of the viewport width

D It becomes 30 pixels tall

Common Confusions - 3 Topics

Why does the box size change when I resize the browser window?

Viewport units (vw, vh) depend on the size of the browser window. When you resize, the viewport changes, so the box resizes accordingly (see render_steps 2 and 3).

💡 Viewport units always scale with the visible browser area.

Why doesn't 100vw always equal the full width of the screen?

100vw is the width of the viewport, which excludes browser UI like scrollbars. So if a vertical scrollbar appears, 100vw might be slightly wider than the visible content area.

💡 Viewport units measure the visible browser area, not the entire screen.

Why does text inside the box stay centered vertically and horizontally?

Because display:flex with align-items:center and justify-content:center centers content inside the box (see render_step 5).

💡 Flexbox is a simple way to center content inside containers.

Property Reference

Property	Value Applied	Description	Visual Effect	Common Use
width	50vw	Width is 50% of viewport width	Box stretches horizontally to half screen width	Responsive width sizing
height	30vh	Height is 30% of viewport height	Box height is 30% of screen height	Responsive height sizing
font-size	2rem	Font size relative to root font size	Text appears larger	Readable text sizing
border-radius	0.5rem	Rounded corners with 0.5 rem radius	Box corners are rounded	Visual softness
background-color	#4a90e2	Blue background color	Box background changes color	Visual emphasis
color	white	Text color white	Text is visible on dark background	Contrast for readability

Concept Snapshot

Viewport units (vw, vh) size elements relative to the browser window. 1vw = 1% of viewport width, 1vh = 1% of viewport height. They help create responsive layouts that adapt to screen size. Commonly used for widths, heights, font sizes, and spacing. Viewport units change dynamically when the window resizes. Combine with flexbox for centered, responsive content.