[GH-ISSUE #388] Nested scrollbox content not clipped (inner scrollbox text overdraws outside container) #96

New issue

Closed

opened 2026-03-02 23:44:30 +03:00 by kerem · 1 comment

kerem commented

2026-03-02 23:44:30 +03:00

Owner

Originally created by @acoliver on GitHub (Dec 5, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/388

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

Render an outer scrollbox with a fixed height (e.g., 15), border: true, overflow: "hidden", scrollY: true.
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.
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.

Originally created by @acoliver on GitHub (Dec 5, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/388 ### 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.

kerem closed this issue

2026-03-02 23:44:31 +03:00

kerem commented

2026-03-02 23:44:31 +03:00

Author

Owner

@acoliver commented on GitHub (Dec 5, 2025):

@acoliver commented on GitHub (Dec 5, 2025): <img width="1556" height="1585" alt="Image" src="https://github.com/user-attachments/assets/f27e69f9-66f3-49ba-a475-e4c1286d74e6" />

kerem referenced this issue

2026-03-02 23:44:37 +03:00

[GH-ISSUE #435] feature: default flexShrink=0 for text elements #109

kerem referenced this issue

2026-03-14 08:34:44 +03:00

[GH-ISSUE #96] Support for textOverflow: 'truncate' in text #791

kerem referenced this issue

2026-03-14 08:54:49 +03:00

[GH-ISSUE #435] feature: default flexShrink=0 for text elements #880