内容不会留在 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

一个简单的解决方案是在 .main class

上使用 overflow: auto;

Answer 2

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