CODEWITHSUNDEEP
htmlcsscss-grid
Braedon
Braedon

Reputation: 66

How to get overflow to work correctly in CSS grid?

I've just started learning CSS grid and have decided to try and build the technical documentation page challenge from FCC: https://codepen.io/freeCodeCamp/full/NdrKKL

In my implementation, I can get 85% of the way but I'm struggling to get the overflow to work correctly so that both the sidebar and the content can scroll independently. I think it might be a problem with margin somewhere but can't identify where.

When I apply:

  overflow: auto;

to my content, it cuts off half of my HTML.

Where am I going wrong?

https://codepen.io/braedongough/pen/PVYvzR

Upvotes: 3

Views: 134

Answers (1)

Aniket G
Aniket G

Reputation: 3512

For the sidebar, add a position: fixed; That is what basically makes the sidebar and content "separate".

For the content, add a margin-left: 200px; That number could be anything you want it to be. You need to do that or the sidebar and your content will overlap (because the sidebar has a fixed position).

Remove the height: 100vh; from content. It causes it to take up the whole screen and breaks the overflow.

I fixed your codepen for you: https://codepen.io/newracket/full/bzbyxJ

Upvotes: 1

Related Questions