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

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:

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

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

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