Overflow Handling in CSS

What You Learn From This Page

• Why content overflows and how the CSS overflow model handles it.
• How visible, hidden, clip, scroll, and auto differ in clipping and scrolling behavior.
• How overflow-x, overflow-y, logical axes, and two-value shorthand interact.
• How to contain tables, code, images, dialogs, sidebars, and dynamic user content.
• Why intrinsic sizing causes overflow in Flexbox and Grid and how to correct it.
• How clipping affects sticky elements, positioned overlays, focus indicators, and z-index.
• How to debug horizontal overflow and design accessible, responsive scroll regions.

Introduction

CSS overflow handling determines what happens when content needs more space than a box provides. A label may be longer than expected, a table may contain many columns, an image may retain a large intrinsic width, or a message panel may keep receiving new entries. The browser must decide whether that content may paint outside the box, must be clipped, or should remain available through scrolling.

The central property is overflow, supported by the axis-specific overflow-x and overflow-y properties. Its familiar values are visible, hidden, clip, scroll, and auto. They look simple, but each value affects clipping, scroll-container creation, formatting contexts, sticky positioning, keyboard access, and programmatic scrolling differently.

Good overflow design does not begin by hiding whatever extends beyond a boundary. It begins by asking why the overflow exists, whether the content should reflow, and whether users need access to every part of it. Clipping is appropriate for decorative crops; scrolling is appropriate for genuinely constrained regions; natural document flow remains best for most reading content.

What Is Overflow?

A box overflows when its content or descendants extend beyond the relevant box edges. This can happen because the box has a fixed or maximum size, because a child has an inflexible width, because text has no legal wrapping opportunity, or because transforms and positioned descendants paint outside their containing area.

.panel {
  inline-size: 18rem;
  block-size: 10rem;
}

If the panel's content needs more than the declared inline or block size, the excess becomes overflow. The overflow properties decide how the browser exposes or clips that excess. Overflow is therefore not necessarily an error. It is a normal result of combining finite boxes with variable content.

The Basic Syntax

A single overflow value applies to both physical axes. Two values assign the first to overflow-x and the second to overflow-y. The longhands can also be declared separately when the axes need different treatment.

.box {
  overflow: auto;
}

.mixed-axis-box {
  overflow: hidden auto;
}

.table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
}

The initial value is visible. Overflow applies to block containers as well as flex and grid containers. It does not inherit, so each component controls its own boundary unless a special root-element propagation rule applies to the document viewport.

Overflow Needs a Boundary

Adding overflow: auto to an ordinary block may appear to do nothing because a block normally grows in the block direction to contain its content. Scrolling becomes observable only when content exceeds a constraint or another layout rule prevents sufficient expansion.

.activity-panel {
  max-block-size: 24rem;
  overflow-y: auto;
}

A maximum size is often more adaptable than a fixed height. Short content keeps its natural size, while long content stops at the maximum and becomes scrollable. Fixed heights are appropriate when a stable application region is intentional, but they are risky for translated, zoomed, or user-generated text.

overflow: visible

visible is the initial overflow value. Excess content is not clipped at the box's padding edge and may paint over neighboring content. The element does not become a scroll container merely because the content visibly extends outside it.

.decorative-badge {
  overflow: visible;
}

Visible overflow works for decorative shapes, shadows, and intentional visual extensions where overlap is understood. It is unsafe when long content can cover controls or make component boundaries meaningless. A visible child also cannot always escape every ancestor: any ancestor that clips overflow can still cut it off.

overflow: hidden

hidden clips overflowing content and does not provide a visible scrolling interface. It is widely used for image crops, rounded media, sliding effects, and intentionally masked regions. Importantly, hidden is a scrollable overflow value in the CSS model: the box is a scroll container, and scripts or focus navigation may still change its scroll position.

.media-card {
  border-radius: 0.75rem;
  overflow: hidden;
}

This distinction matters when code calls scrollTo(), an anchor target receives focus, or sticky descendants determine their scrollport. Hidden should not be interpreted as a stronger spelling of clip. It combines visual clipping with scroll-container semantics.

overflow: clip

clip clips content at the overflow clip edge without creating a scrolling mechanism or scroll container. Programmatic scrolling does not reveal the clipped content. It is the more direct choice when the requirement is pure clipping rather than a concealed scrollable region.

.visual-mask {
  overflow: clip;
  overflow-clip-margin: 0.25rem;
}

Unlike non-visible scrollable values, clip does not by itself establish a new block formatting context. If the component also needs formatting-context isolation, pair it with display: flow-root. The optional overflow-clip-margin can move the clip edge outward for selected visual effects, though support and exact use should be tested for the project's browser targets.

hidden vs clip

Hidden and clip both remove excess painting from view, but their behavior after clipping is different. Hidden retains a scrollable overflow area, while clip discards access beyond the clip edge. Hidden can therefore react to programmatic scrolling and can become the containing scrollport used by related features. Clip cannot.

Choose based on behavior, not appearance. If a carousel track is moved through scrolling APIs, hidden may be required. If an animation should simply disappear beyond a decorative mask and never be scrolled, clip communicates that requirement more accurately.

overflow: scroll

scroll clips overflow and establishes scrolling whether or not the content currently exceeds the box. A scrolling mechanism is reserved in the model, although actual scrollbar presentation varies by operating system, browser, input mode, and overlay-scrollbar preference.

.diagnostic-log {
  block-size: 18rem;
  overflow: scroll;
}

Scroll is useful when a stable scrollable viewport is itself part of the design. It should not be described as guaranteeing permanently visible bars because many platforms use transient or overlay controls. For ordinary panels where scrolling is needed only sometimes, auto is generally less intrusive.

overflow: auto

auto behaves like scroll when scrollable overflow exists and like hidden otherwise. The browser exposes a scrolling mechanism only when needed according to its platform conventions. This makes auto the usual choice for dialogs, sidebars, data tables, logs, and bounded application panels.

.notification-list {
  max-block-size: 22rem;
  overflow-y: auto;
}

Auto is not a command to make a box scroll immediately. The box still needs content that exceeds its used size. Test both states: short content with no need to scroll and long content with controls near the final edge.

Comparing the Main Values

The best value follows the content contract. If all content is essential, clipping without another way to reach it is usually wrong. If the excess is decorative, scrolling adds unnecessary interaction. If the content naturally needs two-dimensional space, a localized scroll wrapper can preserve the surrounding page reflow.

Axis-Specific Overflow

overflow-x controls overflow along the physical horizontal axis, and overflow-y controls the vertical axis. CSS also defines logical overflow-inline and overflow-block properties, which follow the writing mode and can better express intent in internationalized layouts.

.code-sample {
  overflow-x: auto;
  overflow-y: hidden;
}

.writing-mode-aware-panel {
  overflow-inline: auto;
  overflow-block: clip;
}

Axis control is useful, but the axes are not completely independent. Their computed values can change when one axis is scrollable and the other is visible or clip.

Mixed-Axis Computed Values

If one axis is neither visible nor clip, a specified visible value on the other axis computes to auto. In the corresponding situation, clip computes to hidden. This prevents a box from exposing overflow freely on one axis while participating as a scroll container on the other in a contradictory way.

.example {
  overflow-x: hidden;
  overflow-y: visible; /* Computes to auto. */
}

This is why a declaration that appears to request visible vertical overflow can still clip or scroll after the horizontal axis is set to hidden. Inspect computed styles when mixed-axis behavior is surprising, and avoid relying on a visible escape route from a scroll container.

Fixed Size vs Maximum Size

A fixed block size creates a stable viewport but can waste space when content is short and force scrolling sooner under zoom or translation. A maximum block size allows natural growth until the component reaches an intentional boundary.

.less-adaptive {
  block-size: 20rem;
  overflow-y: auto;
}

.more-adaptive {
  max-block-size: 20rem;
  overflow-y: auto;
}

Neither pattern is universally correct. A chat transcript may need a stable area within an application shell, while a disclosure panel in an article should usually grow naturally. The constraint should come from the interface requirement rather than from an arbitrary effort to make every card the same height.

Single-Line Text Ellipsis

text-overflow: ellipsis signals clipped inline text with an ellipsis. It does not create overflow, prevent wrapping, or set a width by itself. The common single-line pattern combines a constrained inline size, no wrapping, and clipped overflow.

.file-name {
  max-inline-size: 18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ellipsis is a visual treatment, not a content replacement. Users may still need the complete value through nearby detail, an accessible expansion, or a layout that reveals it on demand. Do not truncate the only visible distinction between similar options or hide essential error information.

Multiline Truncation

Multiline truncation is more complex than single-line ellipsis. The established web pattern often uses a vendor-prefixed line-clamp construction, while the standardized line-clamp model continues to evolve. It should be treated as progressive enhancement rather than the storage location for important text.

.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Provide a reliable way to reveal the complete content when truncation affects meaning. Test font changes, language expansion, browser zoom, and forced text spacing because a nominal number of lines contains different amounts of information in different conditions.

Long Words, URLs, and User Content

Sometimes the correct fix is to create text wrapping opportunities instead of clipping or scrolling the box. overflow-wrap: anywhere allows an otherwise unbreakable string to break when necessary and also influences min-content sizing. It is valuable for URLs, identifiers, hashes, and user-generated content.

.comment {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

word-break: break-all is more aggressive and can split ordinary words at arbitrary points, reducing readability. Use it for specialized data only when the format requires dense breaking. Preserve language-appropriate wrapping for normal prose.

Code Block Overflow

Source code depends on indentation and sometimes contains long tokens that should not wrap. A local horizontal scroller is preferable to allowing the code block to widen the entire page.

pre {
  max-inline-size: 100%;
  overflow-x: auto;
  white-space: pre;
}

Ensure the scroller can be reached and operated by keyboard when its content cannot otherwise be accessed. Keep important commands selectable, avoid covering the scrollbar with floating controls, and provide enough spacing that the last line is not hidden by an overlay.

Responsive Tables

Data tables often need two-dimensional relationships that cannot sensibly collapse into ordinary paragraphs. Wrapping the table in a horizontal scroll container lets the surrounding page reflow while preserving the table's column structure.

.table-wrapper {
  inline-size: 100%;
  overflow-x: auto;
}

.table-wrapper table {
  min-inline-size: 50rem;
}

Keep the semantic table intact, label it correctly, and place scrolling on the wrapper rather than the whole document. Where possible, use concise headings and responsive column priorities before requiring extensive panning. A visible edge treatment or instruction may help users discover horizontal content on touch screens.

Image Cropping and Rounded Media

Clipping is intentional when a media frame must maintain a stable aspect ratio. The container defines the viewport, while object-fit: cover scales and crops the image without distorting its proportions.

.thumbnail {
  aspect-ratio: 3 / 2;
  border-radius: 0.75rem;
  overflow: hidden;
}

.thumbnail img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

Use meaningful alternative text based on the image's purpose. Visual cropping does not change the accessible description, so the selected focal area and description should still communicate the same subject.

Flexbox Overflow and min-width: 0

Flex items have an automatic minimum inline size that can preserve the min-content width of their contents. A long token or no-wrap label may therefore force the item wider than the flex container even when shrinking appears to be enabled.

.row {
  display: flex;
}

.row__content {
  min-inline-size: 0;
}

.row__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Setting min-inline-size: 0 on the correct flex item permits it to shrink below its intrinsic content width. Apply ellipsis only to the text box after the parent is actually allowed to shrink.

Grid Overflow and minmax(0, 1fr)

A fractional grid track can also retain an intrinsic minimum that allows wide content to push beyond the grid. Explicitly setting the minimum to zero makes the track genuinely shrinkable.

.dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

This does not mean every grid should use zero minimums. Intrinsic protection is valuable when content must not become too narrow. Use the technique when the component has another deliberate strategy for wrapping, truncating, or locally scrolling wide content.

Common Causes of Horizontal Page Overflow

Document-level horizontal scrolling is commonly caused by fixed-width children, large intrinsic images, unbreakable strings, excessive minimum widths, negative margins, translated elements, absolutely positioned decorations, and width calculations that omit padding or borders.

width: 100vw is another frequent cause. Viewport units can include the scrollbar area, making an element slightly wider than the document's content region. For an element that should fill its parent, inline-size: 100% is often safer. Global box-sizing: border-box also makes padding and borders easier to include in intended dimensions.

img,
video,
svg {
  max-inline-size: 100%;
  block-size: auto;
}

Do Not Hide the Page-Level Symptom

Applying overflow-x: hidden to html or body can remove the horizontal scrollbar while leaving content inaccessible and the faulty component unfixed. It also changes viewport overflow behavior and can interact with sticky positioning, anchoring, and scripts.

Use global clipping only when the design intentionally has off-canvas visual effects and those effects are verified not to contain meaningful content. During debugging, keep the scrollbar visible because it is evidence. Find the box that exceeds the layout, then correct its size, wrapping, positioning, or containment.

Positioned Descendants and Clipping

An absolutely positioned dropdown, tooltip, badge, or menu can extend beyond its positioned ancestor. If any ancestor between it and the viewport clips overflow, the extending portion is cut off. Increasing z-index cannot solve this because stacking order and clipping are separate operations.

.card {
  position: relative;
  overflow: hidden;
}

.card__menu {
  position: absolute;
  inset-block-start: 100%;
  z-index: 1000; /* Still clipped by .card. */
}

Fix the architecture by avoiding clipping on the shared ancestor, moving the overlay to an appropriate top-layer or portal system, or separating the rounded media mask from the interactive overlay container.

Overflow, Shadows, and Focus Rings

Overflow clipping can cut off child box shadows, transformed decoration, and focus indicators. A control may technically receive focus while its outline is partly or completely invisible, which is a serious keyboard usability problem.

Do not place focusable controls directly against a clipping edge without room for their focus style. Add internal padding, use an inset focus treatment with sufficient contrast, or restructure the clipping boundary. Test with the keyboard rather than assuming an outline visible in a static screenshot remains visible after scrolling.

Overflow and Sticky Positioning

A sticky element relates to its nearest relevant scrollport. An ancestor with auto, scroll, or hidden overflow can become that scroll container, causing the sticky element to stick within a smaller region instead of the page. If that ancestor does not visibly scroll or lacks enough travel distance, sticky may appear broken.

Inspect every ancestor when debugging sticky behavior. Check computed overflow on both axes, the ancestor's used size, and whether the sticky element has space to move. Because clip is non-scrollable, it differs from hidden in this interaction, though clipping can still affect what is painted.

Scroll Containers and Scrollport Behavior

A scroll container exposes a scrollport through which a larger scrollable overflow area can be viewed. This concept supports user scrolling, script APIs, sticky positioning, scroll snapping, and anchor navigation. A box can be a scroll container even if its current content fits and no scrollbar is visible.

Keep scroll ownership clear. A page with a scrollable shell, sidebar, modal, list, and dropdown can leave wheel, touch, and keyboard input moving an unexpected region. Each independent scrollport should exist for a concrete interaction reason.

Scrollbar Space and scrollbar-gutter

Classic scrollbars consume layout space, while overlay scrollbars are drawn over content. When a classic scrollbar appears, the available inline size may change and nearby content can shift. scrollbar-gutter: stable can reserve a gutter for a potential classic scrollbar on eligible scrolling boxes.

.results-panel {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

This property does not make scrollbar rendering identical across systems and does not force overlay scrollbars to consume classic gutter space. Treat it as a layout-stability tool, then test Windows, macOS, mobile, and user scrollbar preferences rather than designing against one screenshot.

Nested Scrolling and Scroll Chaining

Nested scroll regions can be difficult on touch screens and trackpads. Once an inner region reaches its boundary, the remaining gesture may scroll an ancestor, a behavior called scroll chaining. In focused interfaces, overscroll-behavior can control that propagation.

.modal__body {
  max-block-size: 70dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

Containment should not become a substitute for simpler page structure. Too many scroll areas increase navigation effort, hide position, and complicate assistive interaction. Prefer one primary scroll region and introduce nested scrolling only where the information architecture requires it.

Keyboard Accessibility

Users must be able to reach all meaningful content in a scroll region without relying on a mouse or touch gesture. Modern browsers may make scrollable regions keyboard focusable automatically, but behavior varies, and a region with no focusable descendants may still require an intentional focus target.

<section class="audit-log" tabindex="0" aria-label="Audit log">
  ...
</section>

Add tabindex="0" only when it solves a real reachability problem because every extra tab stop has a cost. Give the region an accessible name when its purpose is not obvious, preserve a strong focus indicator, and verify arrow, Page Up, Page Down, Home, and End behavior where relevant.

Focus Visibility and Hidden Content

Clipped content can contain links or controls that remain in the tab order. If focus moves to an element that cannot be scrolled into view, the user may lose track of the current position. This is especially dangerous with overflow: clip or collapsed panels whose descendants were visually hidden but not made inactive.

When content is unavailable, remove its controls from interaction through an appropriate component state, such as the native hidden attribute, inert where suitable, or by not rendering it. When content remains available in a scroller, ensure focusing it reveals it and is not obscured by sticky headers or footers.

Modal Scrolling and Body Scroll Lock

A tall dialog should fit inside the dynamic viewport and provide an internal scrolling area while the background remains inactive. Native <dialog> can supply top-layer placement and modal interaction behavior, but content sizing still needs care.

.dialog-panel {
  inline-size: min(40rem, calc(100% - 2rem));
  max-block-size: calc(100dvh - 2rem);
  overflow-y: auto;
}

Custom body scroll locking often uses overflow: hidden. Restore the original state when the dialog closes, preserve the page's scroll position, account for scrollbar-width changes, and test virtual keyboards. Scroll locking alone does not provide focus trapping, labeling, Escape handling, or background inertness.

Mobile and Dynamic Viewports

Mobile overflow must be tested with touch input, browser chrome expansion, orientation changes, zoom, safe areas, and the on-screen keyboard. A panel sized to 100vh may not match the currently visible viewport when browser controls appear. Dynamic viewport units such as dvh can better match the changing visible area.

Do not disable browser gestures or hide scroll indicators simply to create a visually minimal surface. Make drag direction discoverable, keep fixed controls from covering the final content, and verify that a focused form field remains visible when the keyboard reduces the viewport.

Normal Text Should Reflow

Ordinary paragraphs should normally wrap within the viewport rather than require horizontal scrolling. At high zoom or narrow widths, users need content to reflow into a readable single-column presentation. Horizontal scrolling is more defensible for inherently two-dimensional material such as source code, complex tables, timelines, and diagrams.

article {
  inline-size: min(calc(100% - 2rem), 70ch);
  margin-inline: auto;
  overflow-wrap: anywhere;
}

Avoid fixed page widths and broad minimum widths. Test around 320 CSS pixels and at 400 percent zoom while watching for both clipped controls and unexpected document-level horizontal movement.

Print and Export Behavior

A scroll container that works on screen may print only its visible viewport or create awkward clipped output. Reports, tutorials, invoices, and certificates need print-specific rules that allow important content to expand and paginate.

@media print {
  .report-panel {
    max-block-size: none;
    overflow: visible;
  }
}

Do not assume browser print engines treat every overflow combination identically. Preview long tables, code blocks, and page breaks. If horizontal information cannot fit, provide a landscape print layout, reduced but legible sizing, or a purpose-built export format.

Performance Considerations

Overflow itself is not automatically expensive, but large interactive scroll regions can require substantial layout, painting, memory, and event work. Thousands of complex rows, heavy shadows, sticky descendants, and scroll-linked JavaScript can make scrolling unstable.

Measure before optimizing. Virtualize genuinely large collections, avoid synchronous layout reads in scroll handlers, prefer passive listeners where appropriate, and use browser performance tools to identify painting or scripting bottlenecks. Do not add will-change broadly; unnecessary layers can consume more memory without solving the real problem.

Debugging Horizontal Overflow

Begin by reproducing the issue at the exact viewport, zoom, content, and language that exposes it. Scroll to the far edge and inspect boxes near the visible boundary. In developer tools, compare each element's bounding box with the document's client width and inspect computed width, min-width, margin, transform, and positioning.

Temporarily outlining elements can expose the offender:

* {
  outline: 1px solid rgb(255 0 0 / 20%);
}

Then check replaced elements, long strings, preformatted text, flex automatic minimums, grid track minimums, viewport units, negative margins, and translated decoration. Remove the diagnostic rule after locating the cause; do not ship universal outlines or global clipping as the solution.

A Systematic Overflow Workflow

First classify the overflow as inline, block, or both. Next determine whether it comes from content, intrinsic sizing, an explicit size, or visual positioning. Decide whether users need the excess content. Finally choose reflow, resizing, local scrolling, or intentional clipping.

If text can wrap, prefer wrapping. If media can scale, constrain its maximum inline size. If a table needs its geometry, isolate horizontal scrolling to its wrapper. If a decorative animation should disappear at a boundary, clip it. This sequence produces a reasoned choice instead of treating every overflow symptom with hidden.

Testing Strategy

Test each component with minimum and maximum expected content, long translated labels, long URLs, missing images, large text, browser zoom, keyboard navigation, touch scrolling, reduced viewport height, and both scrollbar styles. Check light and dark themes because clipping can be less obvious when edges blend into the background.

For scroll regions, verify the beginning and end are reachable, focused controls remain visible, sticky content does not obscure targets, and scrolling does not unexpectedly move the page. For clipping, confirm that only decorative or intentionally abbreviated content is removed and that overlays are mounted outside the clipping boundary.

Common Overflow Mistakes

The most common mistake is hiding overflow at the page root to conceal a broken child. Other failures include using fixed heights for dynamic prose, clipping dropdowns inside rounded cards, assuming z-index escapes a clip, forcing scrollbars on every panel, and creating several nested scrollports without a clear interaction model.

Developers also apply ellipsis without allowing a flex item to shrink, use break-all on ordinary language, forget that hidden creates a scroll container, and expect overflow-y visible to remain visible beside overflow-x hidden. These issues are solved by understanding sizing and computed behavior before adjusting surface styling.

Related Properties

Common Interview Questions

What does overflow control? It controls how content extending beyond a box is painted, clipped, and made scrollable. What is the initial value? The initial value of the overflow longhands is visible.

What is the difference between auto and scroll? Both create scrollable behavior, but auto exposes a scrolling mechanism when overflow exists, while scroll establishes it regardless of current overflow. Actual scrollbar visibility remains platform-dependent.

What is the difference between hidden and clip? Both clip excess content, but hidden creates a scroll container that can be scrolled programmatically, while clip creates no scroll container and does not expose the clipped area by scrolling.

Why can overflow affect position: sticky? A scrollable overflow value on an ancestor can establish the scroll container whose scrollport governs sticky positioning. Can z-index escape overflow clipping? No. Z-index changes stacking order, not the ancestor's clip.

How should a wide table work on mobile? Keep the semantic table, place it inside a labeled or understandable wrapper with horizontal auto overflow, and keep the rest of the page reflowing normally.

Practical Review Checklist

• Identify whether the overflow is intentional before clipping it.
• Let reading content grow and reflow whenever the layout permits.
• Use auto for bounded regions that should scroll only when necessary.
• Use clip for pure clipping and hidden when scroll-container behavior is needed.
• Keep tables and code in local horizontal wrappers instead of widening the page.
• Use overflow-wrap for long user strings and URLs before forcing box clipping.
• Check min-inline-size in Flexbox and minmax track minimums in Grid.
• Inspect ancestor overflow when sticky elements or overlays behave unexpectedly.
• Ensure focus indicators and keyboard-reachable content remain visible.
• Avoid unnecessary nested scroll regions and undiscoverable hidden scrollbars.
• Test mobile keyboards, zoom, translations, print, and multiple scrollbar modes.
• Fix the overflowing component instead of globally hiding page overflow.

Key Takeaway

Overflow handling is the boundary policy of a CSS box. Visible lets excess content paint outside; hidden clips it while retaining scroll-container semantics; clip performs pure clipping; scroll establishes a scrolling viewport; and auto introduces scrolling when the content needs it. Those choices influence far more than the presence of a scrollbar.

The strongest implementation preserves content first. Let ordinary text reflow, make media flexible, correct intrinsic sizing constraints, and isolate horizontal scrolling to content that truly needs width. Use clipping only when the hidden portion is intentional, and design every meaningful scroll region for keyboard, touch, zoom, focus visibility, responsive layouts, and real dynamic content.