The first screenshot of overflow: clip and overflow: hidden can be identical. The behavioural difference appears when a script, fragment, focus move, sticky element or scroll-driven feature expects a scroll container.
This guide follows one fixed panel through scrollTop, focus, fragment navigation, formatting contexts, flow-root, overflow-clip-margin, axis coupling and accessible collapsed-state checks.
The worked records are original teaching examples. Each keeps the observed value, reference condition, derived result and decision in separate fields so the reader can see where a conclusion begins and where it stops.
A changed-context check alters one consequential condition while leaving the other inputs fixed. This makes transfer visible and prevents the original numerical answer from becoming a rule without a scope.
Keep a compact evidence receipt: object, method, units, reference, conditions, transformation, result and nearest rival explanation. A future reader should be able to reproduce the narrow claim from that receipt.
The five reading routes move from definitions to mechanism, evidence, transfer and reporting. Readers may enter by task, but the examples remain connected so the explanation never becomes a list of detached tips.
The practical standard is an answer that can be checked. Preserve raw inputs, intermediate calculations, exclusions and versioned sources; then state one stronger claim that the evidence still cannot support.
Before choosing a formula or property, name the reader job in one sentence. A diagnostic question, a design choice, a compliance check and a teaching comparison may use the same observation differently.
Every worked case includes a counterexample with one familiar surface feature and a different mechanism underneath. The pair matters because a definition becomes useful only when the learner can reject a tempting near-match.
The evidence route treats missing information honestly. An unknown method, reference condition or boundary stays blank until a source supplies it; a plausible assumption may complete the arithmetic while weakening the conclusion.
The transfer route changes scale, location, timing or composition without silently changing every other field. Predict the direction first, then calculate or inspect the result.
The reporting route keeps measurement and judgement separate. State what was observed, what rule produced the derived value, what uncertainty remains and which action follows only under the declared conditions.
The final check is reader-facing: a person entering through the short answer should know the distinction, a person following the worked example should reproduce it, and a person using the sources should see where the example ends.
A useful misconception test asks the learner to construct two cases with the same headline number and different underlying records. If the interpretation changes, the omitted condition belongs in the result.
Where a standard leaves behaviour to the platform, method or competent decision-maker, the article says so directly. A boundary is useful evidence because it tells the reader which conclusion can travel.
The examples avoid hidden precision. Rounded display values remain linked to the unrounded calculation, and stipulated inputs are labelled as teaching data.
A complete explanation keeps three layers apart: the thing in the world, the method that turns it into a value, and the decision made from that value. When two labels sit in different layers, numerical agreement is evidence to investigate rather than permission to merge their meanings.
For each central example, sketch the boundary before calculating. Mark what crosses it, what stays outside, what the instrument or algorithm can observe, and what must be inferred. This small diagram prevents a later percentage, ratio or diagnostic label from silently changing its object.
This specialist guide belongs to the Websites root. It also connects to The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub. The worked cases are original teaching examples; their numbers are stipulated so that the reasoning can be checked.
eduKateSG · Websites
Find your next learning step
Read the short answer first: hidden clips paint but remains a programmatically scrollable scroll container; clip forbids scrolling and does not establish the same formatting context. Choose from the required access path.
ROUTE 1 · CHAPTERS 1–4
Define the quantities
Name the quantities, reference conditions and reporting rules.
ROUTE 3 · CHAPTERS 9–12
Audit the evidence
Check instruments, algorithms, assumptions and rival explanations.
ROUTE 5 · CHAPTERS 17–20
Report and continue
Repair shortcuts, answer questions and follow verified routes.
Chapter contents
Define the quantities · Chapters 1–4
1. Name hidden and clip separately
2. Start from the overflow area
Work the mechanism · Chapters 5–8
Audit the evidence · Chapters 9–12
10. Audit absolutely positioned descendants
Transfer the reasoning · Chapters 13–16
13. Transfer to sticky descendants
14. Transfer to scroll-driven features
Report and continue · Chapters 17–20
17. Repair hidden safely stores collapsed controls
18. Build a cross-browser fixture
Both overflow: hidden and overflow: clip suppress painting outside the overflow clip edge, but hidden creates a scroll container that may be moved programmatically while clip forbids scrolling and does not create a scroll container. The identical first screenshot therefore conceals a behavioural difference.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Place a target 500 pixels below a 160-pixel panel. With hidden, call scrollTo or focus the target and record scrollTop. With clip, repeat and record that no scrolling mechanism exposes it.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Keep dimensions and content fixed while changing only hidden to clip.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Current behaviour comes from CSS Overflow Level 3 and targeted implementations. Test the actual browser before using it for a critical interaction.
Overflow exists when a descendant’s scrollable or ink overflow extends beyond the box. Before choosing a value, identify whether the design needs to preserve content access, suppress accidental paint or establish a scrolling mechanism.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Draw the padding box, overflow clip edge and location of the offscreen target for one panel.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Move the target inside the padding box without changing overflow.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
No overflow value repairs a layout whose essential content was placed outside its usable area.
A reproducible fixture uses the same box, child, target and script. It reads clientHeight, scrollHeight and scrollTop before and after a programmatic request so the mechanism is visible beyond the pixels.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
For a 160-pixel panel with 620-pixel content, set scrollTop to 300. Hidden retains a scroll-container model and can expose the target; clip keeps the content clipped and scrollTop does not become an access path.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Reduce content height below 160 pixels and show that both values now appear identical because there is no overflow to exercise.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
DOM metrics can have implementation details. Preserve the browser build and exact script in the receipt.
CHAPTER 4 OF 20 · Define the quantities
4. Separate user scrolling from programmatic scrolling
Hidden suppresses the usual scrolling user interface, yet scripts, focus navigation or fragment targeting can still move its scroll position. Clip forbids scrolling through any mechanism. Neither value should be described merely as “no scrollbar”.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Try wheel input, scrollbar inspection, element.scrollIntoView and direct scrollTop assignment separately.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Keep hidden and add an explicit scrollbar through overflow: auto as a comparison.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Input behaviour can vary with nested scrolling and platform conventions; test each path independently.
A focusable descendant outside the visible portion can cause a hidden scroll container to move when focus reaches it. A clipped box cannot scroll to reveal the target, which can leave focus visually undisclosed or inaccessible.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Tab to a button located below the clip edge and record focus, scrollTop and visible rectangle under both values.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Move the same button into the first visible segment.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Do not place keyboard-operable content beyond a permanent clip edge.
Navigating to a descendant fragment can scroll its nearest eligible scroll container. Hidden may reveal the anchor; clip cannot offer that scrolling route.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Link to #details inside the overflowed panel and inspect page scroll and panel scroll separately.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Place the fragment outside the panel while keeping the URL hash unchanged.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Fragment behaviour depends on document structure and scrollable ancestors, so preserve the full fixture.
A non-visible overflow value such as hidden establishes a new block formatting context. The clip value alone does not; authors who need clipping and a formatting context can pair overflow: clip with display: flow-root.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Place a float inside the box and compare height and surrounding-flow behaviour under hidden, clip and clip plus flow-root.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Remove the float while retaining overflow declarations.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Formatting-context effects are separate from the scroll-container difference and should not be used accidentally as clearfix magic.
The clip value uses an overflow clip edge that can be extended by overflow-clip-margin. Hidden normally clips to the padding box while retaining scrolling. A changed clip margin changes paint exposure without creating scrolling.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Set overflow-clip-margin to 12 pixels and let a box shadow extend eight pixels. Record paint visibility and scrollability separately.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Increase the margin while leaving content geometry fixed.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Support for overflow-clip-margin details must be checked in target browsers.
Overflow-x and overflow-y interact in computed values. Setting one axis to a scrolling value can alter how the other computes, so a declaration that appears to clip only horizontally may create an unexpected scroll container.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Set overflow-x: clip and overflow-y: auto, then inspect computed values and scroll-container behaviour.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Change auto to visible and repeat.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
Do not infer the computed pair from one authored declaration; inspect it.
Positioned descendants, transforms and containment can extend overflow in ways that are not obvious from normal flow. The correct value follows the intended access model, not the assumption that the child “does not count”.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Translate a badge 30 pixels beyond the box and compare its painted extent under visible, hidden and clip.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Keep the transform but increase overflow-clip-margin.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Stacking and containing blocks can also change the result; isolate them in the test.
For a decorative image crop with no interactive or hidden semantic content, clip can express a strict paint boundary without making the crop a scroll container. Hidden may work visually but adds a scrolling model the design does not need.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
Crop a large decorative photo inside a fixed frame and verify there are no focusable descendants or fragment targets.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Turn the crop into a pan-and-zoom viewer and require user access to the offscreen region.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
A real viewer needs explicit controls and an accessible alternative; permanent clipping is not navigation.
An off-canvas interface often needs controlled motion and focus management. Using clip on an ancestor can prevent programmatic reveal, while hidden may permit scrolling but still does not supply a complete dialog or navigation pattern.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Move a panel from outside to inside with a transform and record whether the ancestor scroll position is part of the design.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Keep overflow fixed and remove the transform.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Use established accessible component behaviour; overflow alone is not a state machine.
Sticky positioning depends on the relevant scrolling mechanism and containing relationships. An unintended hidden scroll container can change which ancestor governs sticky behaviour, while clip avoids creating that scroll container.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Place a sticky heading inside nested boxes and compare its reference scrollport under hidden and clip.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Add display: flow-root to clip and show that formatting containment can be restored without a scroll container.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Sticky behaviour also depends on insets and available travel; keep those fields visible.
Scroll snapping, scroll timelines and scroll-padding require a scroll container. Choosing clip removes that basis; hidden may still provide one even without user scrollbars.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Attach a test scroll timeline to the panel and record whether a usable scroll range exists under each value.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Keep hidden but reduce scrollHeight to clientHeight.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
A nominal scroll container with zero range cannot drive meaningful progress.
CHAPTER 15 OF 20 · Transfer the reasoning
15. Repair no scrollbar means not scrollable
A hidden box can scroll without showing a normal scrollbar. The absence of chrome describes one user interface, not the scroll-container state.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Log scrollTop before and after focusing an offscreen input in the hidden panel.
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Repeat with clip and compare.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
Browser extensions and platform overlays can change visual chrome; rely on state and behaviour evidence.
Clip expresses a different layout and interaction contract, not merely an optimization. It removes scrolling and does not establish the same formatting context.
Write the evidence in the order a reader can audit: the Websites quantity, its reference object, the observation or browser rule, the transformation, and the decision being made. Keeping those fields visible prevents a familiar label from hiding a changed basis.
List the three changed fields—scroll container, programmatic access and formatting context—while keeping paint appearance fixed.
First-principles test: ask what physical, observational or algorithmic operation produces each value in this chapter. Then ask whether the second value could change while the first stays fixed. If it can, the two labels are not substitutes. For Websites, this counterfactual is often clearer than a definition learned in isolation.
Add flow-root and show which difference it repairs and which it does not.
Evidence check: another reader should be able to reproduce the narrow result from the stored definitions, inputs and intermediate steps, then identify the nearest stronger claim that the evidence does not support.
Performance claims require profiling and should not be inferred from the property name.
CHAPTER 17 OF 20 · Report and continue
17. Repair hidden safely stores collapsed controls
A visually hidden but scrollable overflow region can still contain focusable controls that keyboard users reach unexpectedly. Clip can make that worse by preventing reveal. Collapsed interactive regions need explicit hidden/inert state management.
Trace the mechanism before interpreting the result. For Websites, mark which value belongs to the source, which belongs to the measurement or layout algorithm, and which is a reported summary. A calculation is useful only when those roles remain attached.
Place a link below the boundary, tab to it, and inspect visual focus under both values.
Practical transfer: build two records that share the headline number but differ in the condition discussed here. If the correct interpretation changes, the omitted condition is decision-relevant and belongs in the report. This test turns a vocabulary distinction into a reusable Websites checking habit.
Remove the link from sequential focus when the region is collapsed and restore it when expanded.
Practical check: keep one counterexample beside the worked case. If the wording fails when that one condition changes, narrow the sentence until it describes only the evidence actually in hand.
Use platform semantics appropriate to the component; do not rely on overflow as an accessibility primitive.
The fixture should exercise direct scrollTop, scrollTo, scrollIntoView, fragment navigation, focus navigation, float containment and clip margin with one declaration changed at a time.
Use a compact decision table with columns for condition, input, operation, result and limit. This makes the comparison reproducible and exposes where a missing field would force an assumption instead of an observation.
Run it in current target engines and save computed styles plus DOM metrics.
Misconception check: a plausible output does not prove the right reference, denominator, ancestor, spectrum or observation rule was used. Reconstruct one intermediate step and one changed-context prediction. If either cannot be stated, keep the result provisional rather than strengthening its wording.
Change only browser build and rerun the same assertions.
Transfer check: repeat the reasoning with one consequential condition changed while holding the rest fixed. State what changes, what stays comparable and why the original label alone was insufficient.
Compatibility results are dated evidence, not a timeless platform guarantee.
Store HTML, CSS, browser build, viewport, zoom, writing mode, computed overflow pair, client and scroll dimensions, scrollTop traces, focus order, fragment result and accessibility notes.
Preserve the raw inputs beside the derived result. If a later reader changes one condition, the original Websites reasoning should still be recoverable without reverse-engineering a rounded headline or an unlabeled screenshot.
Package hidden, clip and clip-plus-flow-root states with screenshots and machine-readable logs.
Evidence design: retain both a positive case and a near-miss. The positive case shows when the rule applies; the near-miss changes one consequential condition and shows when the conclusion fails. Together they teach the boundary of the Websites mechanism better than another unlabelled example.
Remove the focus trace and ask whether the interaction conclusion remains auditable.
Audit check: retain the source version, units, settings, exclusions and rounding rule. A future correction should be able to alter one field without rebuilding the entire explanation from memory.
A screenshot cannot prove that a box did or did not scroll programmatically.
A defensible report states the required access path first, then the clipping, scroll-container and formatting-context result. It avoids choosing a value solely because the initial pixels look tidy.
Ask what would have to stay fixed for the comparison to be fair. Record those controls explicitly, then name the first uncontrolled condition that could reverse the conclusion. This is the practical transfer step, not an optional footnote.
Write: “Both values clipped the decorative image, but only hidden accepted scrollTop=300; clip plus flow-root preserved float containment without creating a scroll container.”
Communication test: replace any sentence that says two things are “the same” or “different” with a sentence naming the operation, reference condition and supported consequence. The extra words are useful when they let a future reader repeat the decision without access to the original author.
Add an offscreen button and revisit the decision from keyboard access rather than paint.
Decision check: end with an action or interpretation that follows from the stated conditions, followed by a boundary sentence explaining when a specialist rule, local procedure or additional measurement is needed.
If hidden content is meaningful, provide a visible and accessible route to it instead of treating clipping as deletion.
Continue through the verified reading route
Reserved and overlay scrollbar behaviour
Reserved and overlay scrollbar behaviour. Use this when scrollbar space rather than scroll-container state is the reader job.
Scroll padding and scroll margin
Scroll padding and scroll margin. Use this for alignment inside a scrolling container.
Intrinsic content and placeholders
Intrinsic content and placeholders. Use this when offscreen rendering is skipped but layout space must remain predictable.
Frequently asked questions
Why can hidden scroll without a scrollbar?
Scrollbar chrome and scroll-container state are separate; scripts and focus can still move a hidden container.
Does clip establish a block formatting context?
No. Pair it with display: flow-root when that separate behaviour is needed.
Can I hide collapsed controls with overflow alone?
No. Manage visibility, focus and semantics explicitly so unreachable controls are not left in the focus order.
Authoritative sources and further reading
W3C CSS Overflow Module Level 3. Defines clip, hidden, scrolling mechanisms, overflow clip edges and formatting-context consequences.
W3C CSSOM View Module. Defines scrolling APIs and element geometry used to test programmatic behaviour.
W3C CSS Display Module Level 3. Defines flow-root and block formatting contexts used with strict clipping.
Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.
Continue with multi-line clipping
Separate block overflow clipping from line-clamp ellipsis when the reader job concerns how many line boxes remain visible and whether an ellipsis is actually painted.