内容不会停留在Grid Wrapper中;固定侧栏用于更大的屏幕

Question

我正在尝试为网页制作简单的响应式布局， 并遇到两个问题：

1. 当使用宽度超过660像素的屏幕时，我正在尝试将侧边栏（包含页眉，导航和页脚）设为固定栏。

2. 当将屏幕拉伸到800px时，我注意到我放入主容器的虚拟文本溢出。

   以下是代码的一部分：

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

完整代码：

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

关于溢出内容的含义的屏幕截图：  https://i.stack.imgur.com/AXtrz.png

Answer 1

一个简单的解决方案是在overflow: auto;类

上使用.main

Answer 2

确定。主容器具有固定大小，因此不会随文本扩展。你只需要给主div overflow-y: auto;。此处更新了代码codepen