书接上回,看本章前需要阅读上篇笔记 juejin.cn/post/748410...
上回使用flex实现下面这个效果，但是这次使用grid来实现才是更优解。
需求是body最小100vh，当子级变多时body自动扩展。并且让body元素滚动，不是在body内滚动。
当body元素有剩余空间的时候，红色盒子是高度自动扩展的。
现在当页面添加box盒子的时候，box盒子首先压缩红色盒子，压缩到fit-content状态的时候，再扩展父级body盒子高度。让body元素滚动。这是一个非常好的方案。
代码链接在下面，注意是index.html
代码链接在下面，注意是index2.html
grid实现效果代码codesandbox.io/p/sandbox/g...
下图是使用codesandbox内部的预览，这个效果不正确不用管，使用codesandbox的open new tab，在自己新版浏览器效果是正确的。