How to get overflow to work correctly in CSS grid?

Question

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

I may be misunderstanding, but is your problem that the main body element has a scrollbar? — samyok nepal
– samyok nepal, Commented Jan 21, 2019 at 18:42
see this: Medium - CSS Grid, maintaining aspect ratio and managing overflow @Braedon — PIZZZZZZZZZZZA is here
– PIZZZZZZZZZZZA is here, Commented Jan 21, 2019 at 19:00

Aniket G · Accepted Answer · 2019-01-21 19:00:56Z

1

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

answered Jan 21, 2019 at 19:00

Aniket G

3,5321 gold badge16 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get overflow to work correctly in CSS grid?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related