A shadow, outline and translated child can all appear outside a card. Only some of that outside content belongs to the area a scrolling mechanism needs to reveal. The distinction explains why a large visual effect may not change scrollWidth while an almost invisible child does.
This guide follows one original card through shadows, focus rings, glyphs, replaced content, transformed descendants, containment, clipping, tooltips and charts, always measuring paint, boxes and scrolling separately.
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.
A practical diagnostic sequence starts with three independent questions. Which pixels were painted beyond the border? Which descendant boxes enlarged the reachable scrolling range? Which overflow and containment rules clipped or exposed those results? Answering in that order prevents a visible shadow, an unexpected scrollbar and an inaccessible focus target from being described as one problem.
The central evidence ledger preserves declared CSS dimensions, computed values, box rectangles, transform matrices, scroll offsets and screenshots. It also includes a near-miss in which two pages look alike but only one has a real scrollable descendant. That counterexample makes the distinction transferable to new components.
When debugging, change one cause at a time. Removing decoration tests ink; removing or relocating a descendant tests scrollable geometry; changing overflow tests the viewing mechanism. The resulting before-and-after pair is more useful than adding arbitrary padding until a scrollbar disappears.
The bounded conclusion is about the tested box tree and browser versions. It does not claim that every painted effect has a finite known rectangle or that every off-box descendant becomes reachable. Those limits belong in the evidence because CSS explicitly distinguishes painting from scrolling.
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: ink overflow describes painting effects that do not extend layout or the scrollable range; scrollable overflow describes content for which scrolling may need to provide access.
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
Work the mechanism · Chapters 5–8
5. Separate metrics from paint
6. Audit outlines and focus rings
Audit the evidence · Chapters 9–12
Transfer the reasoning · Chapters 13–16
Report and continue · Chapters 17–20
17. Repair visible-means-no-overflow
Ink overflow is painted visual effect outside a box, such as a shadow, outline or overhanging glyph, when that effect does not affect layout. Scrollable overflow contains boxes and line content for which a scrolling mechanism may need to provide access.
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.
Draw a 300-pixel card with a 24-pixel shadow and a child translated 180 pixels below its padding edge; mark the shadow as ink and the child as scrollable evidence.
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 the child fixed and remove only the shadow; the scrollable range should remain while painted extent contracts.
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.
Blur extent can be undefined, so do not turn a visual estimate into a normative pixel boundary.
Mark the border box, padding box, scrollport, scrollable overflow rectangle and ink overflow rectangle before reading scrollWidth or judging a screenshot.
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.
Use one diagram for the central card and store transforms, writing mode and zoom beside the labelled edges.
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.
Change writing mode while preserving logical sizes and predict which physical edge becomes the scroll end.
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.
Nested transforms and three-dimensional projection can require browser geometry evidence.
A box shadow can extend far beyond the border box while leaving scrollWidth and scrollHeight unchanged because it contributes ink rather than scrollable overflow.
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.
Give a 240 by 160 card a 40-pixel shadow and no overflowing descendants; record client dimensions, scroll dimensions and painted screenshot.
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 only the blur radius and predict more paint with the same scrolling range.
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.
Clipping, containment and engine optimizations can change what is painted.
A positioned or transformed descendant can contribute to scrollable overflow when its border box creates content that scrolling needs to reveal.
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.
Place a 100-pixel child at inline offset 260 inside a 240-pixel scroller and record increased scrollWidth and reachable end position.
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 transform while retaining the child and shadow.
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.
Negative-side and unreachable overflow have special rules and may not behave symmetrically.
scrollWidth and scrollHeight summarize a scrolling-related range, getBoundingClientRect reports border geometry, and screenshots record paint; no one measurement supplies the other two.
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.
Collect all three records and explain why a shadow appears in pixels but not in scrollWidth.
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 paint fixed and add a transparent offscreen child with dimensions.
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.
Metric change alone does not prove a user-visible reason for overflow.
Outlines are commonly ink overflow and can paint beyond a border without enlarging the scrolling range, so focus visibility needs a paint and clipping check.
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.
Focus a button at the scrollport edge and record border box, outline width, clipping and scroll position.
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.
Increase outline-offset while leaving layout fixed.
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.
Do not remove needed focus indication; redesign spacing and test accessibility.
Italic glyphs, accents, underlines and text shadows can extend paint beyond line boxes without necessarily enlarging scrollable overflow.
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.
Use a long italic swash and text shadow at the inline edge; compare line box, painted pixels and scrollWidth.
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.
Switch to a plain fallback font at the same computed size.
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.
Font loading and rasterization affect the observed ink.
Overflow of replaced content is treated as ink overflow, unlike an oversized replaced element whose own border box exceeds the 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.
Compare an oversized image element with a same-sized image whose filter glow extends outside its box.
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.
Keep the element box fixed and remove only the filter.
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.
Filters and replaced-element rendering can be implementation-sensitive.
Transformed descendants can expand scrollable overflow when projected border boxes extend outside; rotation also makes painted shape differ from its axis-aligned bounding rectangle.
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.
Rotate a 120-pixel child by 30 degrees near the end edge and record projected corners, scrollWidth and screenshot.
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.
Move only the transform origin to the opposite corner.
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.
Three-dimensional transforms need the specification projection rules.
Paint containment can bound descendant painting while size and layout containment answer other questions; it can change visible ink without explaining every scrollable result.
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.
Put the shadow and displaced child in a paint-contained wrapper and record paint and metrics at wrapper and outer scroller.
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.
Remove only paint containment.
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.
Inspect each containment value because combinations can change sizing elsewhere.
overflow controls visibility, clipping and scroll-container behavior after overflow areas are formed; it does not make a shadow become layout content.
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.
Apply visible, hidden, auto and clip to the same fixture and record scroll-container state, metrics and visible ink.
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 overflow fixed and remove the displaced child.
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.
Axis coupling can change computed overflow-x and overflow-y.
A sticky header shadow can extend outside its border while sticky positioning and scroll range come from other boxes.
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.
Measure a vertically scrolling panel before and after removing only the sticky header shadow.
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 the shadow and add a translated child at the bottom.
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.
Sticky behavior depends on the nearest scrollport and containing block.
A tooltip can be clipped as ink inside an ancestor, contribute geometry as a positioned box, or escape through a portal or top layer.
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.
Render identical tooltip text inside the card, in a document portal and as a popover; record host, clipping and scrolling.
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 the rendering host.
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.
Overflow diagnosis does not replace focus and interaction testing.
Glow filters and HTML labels can extend beyond a chart wrapper through different mechanisms: glow is ink while an oversized label box can affect scrolling.
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.
Place one SVG label with a filter and one absolutely positioned HTML label; compare screenshot and scroll metrics.
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 filter while preserving label positions.
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.
Canvas needs retained drawing coordinates because it exposes no child layout boxes.
CHAPTER 15 OF 20 · Transfer the reasoning
15. Repair the shadow-caused-scrollbar claim
A large shadow near a scrollbar is correlation, while transformed descendants, min-content constraints or pseudo-element boxes are stronger scrollable-overflow candidates.
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.
Delete the shadow and show the scrollbar persists, then delete the translated pseudo-element and show the range contracts.
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.
Reverse the test order to challenge confirmation bias.
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.
Claim an engine bug only after a reduced current-browser fixture.
scrollWidth does not measure every painted pixel; outlines, shadows and glyph overhang can extend beyond it.
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.
Overlay a CSS ruler on the screenshot and compare painted extent with scrollWidth and bounding rectangles.
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 a wider shadow while holding all boxes fixed.
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.
Device-pixel scaling makes screenshot measurement approximate.
Visible overflow still exists; the value permits painting rather than clipping it or providing 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.
Set overflow visible on the fixture and identify both outside regions even without scrollbar chrome.
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.
Change only to auto and observe which region becomes reachable.
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.
Visible pixels can still be covered or inaccessible to input.
Record engine, viewport, zoom, writing mode, overflow values, transforms, containment, client dimensions, scroll dimensions, rectangles, screenshots and keyboard access.
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 shadow-only, displaced-child, outline, transform and containment cases through two current engines.
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.
Keep the fixture checksum fixed and change only the browser build.
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.
Dated evidence should not become a permanent universal claim.
Store DOM, computed styles, font files, box geometry, transform matrices, scroll positions, paint capture and the script that reads metrics.
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 JSON geometry and screenshots for each one-variable change.
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 transform matrix and ask whether another reader can reconstruct the rectangle.
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 alone cannot establish scroll-container state or hidden boxes.
Name which boxes enlarged scrollable overflow, which effects contributed only ink, which property clipped them and which conditions were tested.
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: “The translated child raised scrollWidth from 240 to 360 CSS pixels; the 40-pixel shadow changed paint but not the range in both tested engines.”
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 shadow, remove the child and restate the conclusion.
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.
Specifications and implementations are versioned, especially where open issues remain.
Continue through the verified reading route
Clip and hidden overflow
Clip and hidden overflow. Use this for scroll-container state and programmatic access.
Paint containment and stacking contexts
Paint containment and stacking contexts. Use this when clipping and compositing are merged.
Scrollbar gutters and overlay scrollbars
Scrollbar gutters and overlay scrollbars. Use this for scrollbar space rather than overflow-area formation.
Frequently asked questions
Why does a shadow not always create a scrollbar?
A shadow is normally ink overflow and can change paint without enlarging the scrolling range.
Does scrollWidth measure every visible pixel?
No. It omits many outlines, shadows and glyph overhangs.
Can a transformed child enlarge scrollable overflow?
It can; preserve transform, containing block and browser evidence.
Authoritative sources and further reading
W3C CSS Overflow Module Level 3. Defines ink overflow, scrollable overflow and scrollports.
W3C CSS Transforms Module Level 1. Defines transforms used to trace descendants.
W3C CSS Containment Module Level 2. Defines paint, layout and size containment.
Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.