Hiding Overflow Content Scroll Bars

Hi there,

I’m designing a site with a fixed nav header and footer with two vertically-split scrolling div blocks between. To hide the scroll bars on the content overflow div blocks, I tried the trick of adding 20px to the right padding and -20 to the margin. Aside from making it trickier to have an outline on my divs, it works for the most part, however I started seeing grey lines on either side of the bottom and right edges of the content overflow div blocks. Furthermore, on windows devices a scroll bar appears horizontally on the bottom edge (pictured). Also, this doesn’t scale too well across different breakpoints and devices.

So I was wondering if there is a better workflow to hide the scrolling bars?

Here’s the read only link: Webflow - semblance

& the live site: breezeblock

I really appreciate the hep!