Skip to content

Nested scrollbox content not clipped (inner scrollbox text overdraws outside container) #388

@acoliver

Description

@acoliver

Summary

Nested scrollbox content isn’t clipped: an inner scrollbox’s text draws outside its border and into the outer scrollbox (and even into the header area in our app). Layout sizes/borders render correctly, but overflow clipping doesn’t apply.

Steps to Reproduce

  1. Render an outer scrollbox with a fixed height (e.g., 15), border: true, overflow: "hidden", scrollY: true.
  2. Inside it, render a single child: an inner scrollbox with a fixed height (e.g., 8), border: true, overflow: "hidden", scrollY: true, containing 20+ <text> lines.
  3. Scroll the inner (and/or outer).

Expected

Inner scrollbox content is clipped to its viewport; no text is drawn outside its border or the outer scrollbox.

Actual

Inner scrollbox text overdraws past its border and bleeds into the outer scrollbox (and other UI). Clipping appears to be ignored for nested scrollboxes.

Notes

  • Observed via the React renderer on macOS/iTerm2/kitty; outer scrollbox also had overflow: "hidden".
  • A screenshot showing the bleed is available; happy to attach if helpful.
  • A minimal repro should be possible with the steps above; this looks like a renderer clipping issue rather than a layout sizing issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions