CSS calc()函数

面对下图这种需求应该如何改呢？

一般我们可以给父盒子flex-direction: column;
然后给子盒子1给一个固定的高度，子盒子2给flex：1；
这样就可以达到想要的效果。但这个必须知道高度。不然无济于事。

这里有一种比较靠谱，就是用calc函数。

    //父盒子
    div {
        height: calc(100vh - 165px);
        overflow: auto;
    }

就可以做出这样的效果了，是不是很神奇呢。
参考文章