Content does not stay in Grid Wrapper; Fixed Sidebar for bigger screens

Question

I'm trying to make a simple responsive layout for a webpage, and encountered two problems:

1. I'm trying make the sidebar(containing header,nav and footer) a fixed bar when using a screen bigger than 660px in width.

2. When stretching the screen to 800px, I noticed the dummy text I put into the main container overflows.

   Here's part of the code:

   .wrapper{ display:grid; grid-template-columns: 1fr 4fr;}
   

full code:

https://codepen.io/Aeshtray/pen/GvPdoQ/

And a screenshot about what I meant by overflowing content: https://i.stack.imgur.com/AXtrz.png

Answer 1

A simple solution would be to use overflow: auto; on the .main class

Answer 2

ok. Main container is with fixed size so it will not expand with text. You just need to give main div overflow-y: auto;. Updated code here codepen