When wide content makes the whole page scroll sideways
Content can render correctly and still break the surrounding layout. Find the element that needs extra width and contain scrolling there so nearby content remains stable and reachable.
Read MarkdownUpdated 2026-09-17 Try it: problem and fix
An interactive illustration of the mechanism. Sample data and timing are for learning, not a replay or benchmark of the source application.
Enable JavaScript to run the example. The explanation and verification steps below also work without it.
When to use this lesson
- A table makes the entire page move sideways.
- Long URLs or identifiers push a preview beyond the screen.
- Offscreen columns are clipped or cannot be reached with a keyboard.
- Table boundaries are difficult to see in one theme.
What happened
MuxMap’s Markdown preview rendered tables, but wide tables could expand the page rather than scroll independently. A separate earlier patch improved cell borders and header backgrounds.
Diagnosis and approach
Markdown parsing produced valid HTML; it did not determine where overflow should go. The preview lacked a constrained horizontal scroll region around each table.
For a similar layout problem, compare the page width with each oversized element and its ancestors. Check which element scrolls and whether the last column remains reachable. That separates a rendering failure from a containment problem.
What did not work
The earlier border patch, c3c3852, made cells easier to distinguish but did not add an overflow boundary. The later patch, 50b434a, added the table wrapper and viewport metadata. They address different parts of usability.
No failed clipping experiment is documented. Hiding page overflow is an alternative to avoid when it merely cuts off columns rather than making them reachable.
What changed
Wrap each rendered table in its own region with max-width: 100%, overflow-x: auto, and horizontal overscroll containment. Keep border-collapse on the table. Give the region a visible keyboard focus style and an accessible name so keyboard users can reach offscreen columns.
Add a mobile viewport meta tag and use explicit cell borders with sufficient contrast in both themes. Apply the wrapper in the shared table renderer so all Markdown tables follow the same rule.
.table-scroll {
max-width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
}
How to verify the improvement
Render a table with many columns, long unbroken text, and URLs. Check desktop and narrow mobile viewports in light and dark modes. Scroll to the last column and confirm window.scrollX stays zero, the heading does not move, and a second table retains its independent scroll position. Test keyboard scrolling and visible cell borders.
What to do next time
When one piece of content needs extra width, give it a local scroll region while keeping the page within the viewport. Preserve access to the last column by touch and keyboard. Verify both containment and readability; fixing borders does not establish that the layout is contained.
Limits and exceptions
Use local overflow containment for content that genuinely needs width. Hiding all page overflow can conceal unreachable content and mask the underlying layout issue. A table wrapper does not fix unrelated wide elements such as code blocks or fixed-width headers.
Commit evidence
Based on the linked commits. Verification describes checks to perform, not a claim that tests were executed. Confirm applicability in your own project.