为什么我不爱写height: 100%，更爱写min-height: 100vh;?
开始前，可以看下我前面的一篇文章。
关于height: 100%的一个问题juejin.cn/post/748394…
原因1：因为height: 100%；限制了容器的高度，会让容器内部出现滚动条，这样的交互往往很失败，可阅读区域太小了。更好的体验是使用全局body文档进行滚动。
原因2：在开发合作中。在组件化开发模式下，我们通常在layout组件中定义body的高度。但是会遇到两个问题。问题一：有的页面高度小于100vh，body高度最小100vh。
问题二：有的页面子元素过长，希望撑开body元素使其滚动。此时如果限制了height: 100%，会导致元素在body内部滚动。设置min-height: 100vh;就很合适。
下面使用min-height: 100vh;来实现一个常见又复杂的布局方案。
重申一遍：
需求是body最小100vh，当子级变多时body自动扩展。并且让body元素滚动，不是在body内滚动。
当body元素有剩余空间的时候，红色盒子是高度自动扩展的。
其实主要就是在说一个min-height: 100vh;的效果。但是使用min-height，搭配flex-grow: 1; 却需要注意一点细节。这个效果并不好实现。
参考我的这篇文章。juejin.cn/post/748394…
代码演示：codesandbox.io/p/sandbox/i… （index.html页面）
图2中引申案例的意思是：box元素也可以底部对齐，底部对齐是移动端发送聊天消息的交互逻辑，新消息从底部增加，但是body最小需要占据整满整个屏幕，然后body支持自动扩展。
再说下这种布局的优点。存在剩余空间的时候，红色盒子是flex-grow高度自动扩展的。
也就是没有box元素的时候，红色盒子可以自动填充屏幕剩余高度。
现在当页面添加box盒子的时候，box盒子首先压缩红色盒子，压缩到fit-content状态的时候，再扩展父级body盒子高度。让body元素滚动。这是一个非常好的方案。codesandbox.io/p/sandbox/i… （注意你需要查看index2.html页面代码的预览）
