内容不会留在Grid Wrapper中;固定侧边栏针对大屏幕

Question

我试图做一个简单的响应布局网页， 和遇到的两个问题：

1. 我试图让侧边栏（含头，导航和页脚）固定当使用宽度大于660px的屏幕时，

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

好的。主容器是固定大小的，所以它不会随文本扩展。你只需要给主分区overflow-y: auto;。此处更新代码codepen