Skip to main content

Scroll now works on all pages

· 2 min read
Pratyush
Site maintainer

Topics, Modules, Articles, By Tier, and Exam pages — none of them scrolled. All fixed.

What was broken​

Every multi-page view had the same symptom: content was cut off at the bottom, and the page wouldn't scroll. Article pages were also broken — long articles were stuck, the text just ended.

Root cause​

The site shares CSS with an SPA (single-page app) core that locks the body:

/* kb-core.css — correct for SPA */
body { height: 100vh; overflow: hidden; }

This is right for the SPA because it manages its own scroll inside a <main> element. But the regular pages were inheriting it and getting clipped.

Fix — multi-page pages​

Made the page body a flex column and gave <main> the scroll:

body.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;     /* body still locked */
}
.page-main {
  flex: 1;
  min-height: 0;        /* critical — prevents flex child expanding past parent */
  overflow-y: auto;     /* scroll lives here */
}

Fix — article pages​

Article pages had a deeper problem: two nested flex children both missing min-height: 0, causing the inner scroll container to expand to full content height (~6000px) and never actually scroll.

Added min-height: 0 at both levels. Articles now scroll correctly regardless of length.