Choose Viewport Height Units Without Hiding Mobile Content

.app-shell {
  block-size: 100vh;
}

.app-shell {
  min-block-size: 100dvh;
  block-size: auto;
}

Root cause

Mobile browsers can expose large, small, and dynamic viewport sizes as their controls retract or expand. CSS Values Level 4 defines svh, lvh, and dvh for those distinct states. Legacy vh maps to the large viewport size, which can be taller than the currently visible region.

The fixture deliberately uses explicit 232- and 176-pixel harness values because desktop browser automation cannot reproduce every mobile browser chrome transition. It verifies the geometry of the failure and fix without claiming that the harness is a device emulator.

Define the state the interface must survive

Choose the unit from the product requirement, not from a replacement chart. A reading surface may use a minimum height and continue in normal document flow. A task shell with a final action must keep that action reachable in the smallest visible state, during browser-control changes, and when content grows. Record the shell rectangle, the modeled visible boundary, and the clearance around the final control rather than judging only whether the background appears full-screen.

Repeat the check in portrait and landscape with longer translated text and increased text size. Then test a real supported mobile browser manually, because the deterministic harness does not model an address-bar animation, safe-area inset, or on-screen keyboard. Those device observations supplement the reproducible geometry result instead of being silently generalized from it.

When this fix is not enough

Changing one unit does not decide how content should scroll. A shell with controls, safe-area insets, an on-screen keyboard, or nested scroll regions needs additional design decisions. dvh can also resize while browser UI changes, so critical content should remain reachable without depending on a perfectly stable full-screen height.

Regression condition

Across all recorded browsers and viewports, the failing modeled shell must exceed the visible boundary by 56 pixels. The fixed shell must fit the 176-pixel visible area with zero clipped height. Both states must retain zero page-level horizontal overflow.