When content exceeds the visible height, scroll inside the dialog rather than bursting the overlay

What it is

When content is taller than the dialog’s visible area, the extra must scroll inside the box, and the box itself stays in the viewport. Bursting lets the box grow with the content out of the window, so buttons and titles are pushed out of sight, or the whole page starts to scroll and the scrim–box relation comes apart. Inner scroll keeps the conversation’s border and leaves overflow to the content region. Title and submit should usually pin outside the scroll region, so Confirm is not lost in order to keep reading the question.

Why it happens

A dialog is a closed surface in the viewport. Once content bursts that close, the surface is no longer closed: the user may be scrolling the page underneath, the box slips during the scroll, the scrim shows a gap, and a tap hits main content. Inner scroll puts the scroll container on the content region so the box’s outer edge stays stable against the viewport. If title, close, and primary button join the content scroll, decision controls leave the viewport and it looks as if the dialog has no way to finish. Pinning them at the two ends, with the middle scrolling, keeps “question and submit always here.” Overflow also needs a cue, or it is not obvious that more exists below. What scrolls is the dialog’s content, not the app behind — a wheel over the box must not punch through to the main surface.

Studying it

On a form taller than the viewport, compare inner scroll, bursting the window, and scrolling the page. Record whether title and submit stay reachable, whether the main surface is scrolled by mistake, whether the scrim slips. Independent variables: which slots are pinned, whether the box captures the wheel. Dependent variables: submit reachability, punch-through scroll. Bursting should show the highest rate of unreachable submit.

Where it stops holding

When content is only slightly taller, prefer growing the box a little over introducing a barely movable scrollbar. On a fullscreen dialog, “inner scroll” is page scroll, but submit should still pin so Confirm does not fly away with the copy. Nested scroll (a list inside the box) will fight for the gesture; it must be clear which layer eats the swipe. Print has no scroll; extra-tall content should paginate, and must not assume inner scroll exists on paper.

Applying it

• Make the content region the only scroll container; pin title and primary button at the two ends of the box.
• The box must not leave the viewport; a wheel over the box must not scroll the main surface.
• On overflow, show a sliver of the next field so it is clear there is more below.
• How to check: open a long form in a short viewport. Submit should be visible without scrolling; when you do scroll, the scrim and the box’s outer edge stay put. If submit rides the content out of the viewport, the overlay has burst.

Related

• Within the group: E4.19.1 A dialog’s size should follow how much content it holds, not a single hardcoded box · E4.19.2 On a narrow screen a dialog often has to become fullscreen · E4.19.4 A focused element should not jump when the dialog’s size changes
• Adjacent: E4.10 Modal dialogs · E4.04 Sticky headers and horizontal scroll
• Search terms: dialog scroll · sticky footer · overflow