div 超出如何优雅使用滚动条解决

写代码时候遇到一个适宜小屏的问题：
小屏时候，内层 div 超出外层 div 的包裹，外观不美观。大致如下图所示

一开始我使用滚动条来实现优化，有顿操作：

诶，怎么还是没有变化？最后我发现是因为在这个外层 div 外还有一个大的 div 包裹着，和这个外层div 同级还有一个头部 div，大致如下：

这时候我设置的 height:100%意思是指这个里层主要内容 div 的高度 100%，这时候就达不到我们需要的效果了，所以高度需要动态处理一下。这时候就拿出我们的 calc 函数用于动态计算长度值。
在这个情况里层 div 只需要 最外层div - 里层头部 div，下面是例子

注意

1. 需要最外层的高度是 100%，因为calc 函数是一句这个最外层高度来动态设置的，当然要是你有别的需要另说
2. 记得观察自己的 div 到底是在怎么样子的情况，从块解读去分解他