Conflicting Scrollbar scopes?

[sdc_tk421]

Tell us what’s happening:
I have a scroll bar on the entire page, but I only want the scroll bars to exist on my 2 grid columns. How do I get rid/disable the full-page scrollbar?

Your code so far

Tech Docs

I’ve tried using the “overflow: hidden;” keyword pair, but I think it has something to do with the scope of my grid and I’m not understanding that.

Let me know if you have trouble seeing the codepen.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0

Challenge: Build a Technical Documentation Page

Link to the challenge:

freeCodeCamp.org

[imGarvish]

Hyy @sdc_tk421,

Your project is really so cool. Keep it up!
As of your issue, Try adding below code (for instruction check comments) :

#navbar {
   position : fixed; /*This should be fixed for overflow to work or else it'll be scrolled through the browsers default scroll*/
   height : 100vh; /*This can be of any size*/
   overflow : auto; /*This can be "scroll" too and also you can specify with x and y coordinates*/
}

By adding above code, you’ve to rearrange items again in your grid. As fixed gets out of the normal flow of code. Try below code for that :

main {
  grid-area : 1/2/2/3;
}

Hope you got your answer.
Have a great day ahead!

[sdc_tk421]

Thank you! I’ll have to try this when I get back to it later today. I definitely need to revisit the grid-area documentation for better understanding too