css垂直布局当有多个子元素时，如何让最后一个元素等于剩余高度

Question

如下示例：

<style>
    .main{
        width: 400px;
        height: 600px;
        background-color: #00b5ad;
    }
    .child1{
        width: 100%;
        height: 80px;
    }
    .child2{
        width: 100%;
    }
</style>

<div class="main">
        <div class="child1"></div>
        <div class="child2"></div>
</div>

我想让child2等于main剩下的高度怎么去做，同时main的高度是变化的

Answer 1

height: calc(100% - 80px);

Answer 2

用定位吧，child2的top 等于child1的高，left=right=bottom=0;
calc(100% - child1.offsetHeight); 这种要是在外层大盒子的高度确定的情况才能使用，要是外层大盒子高度是100%;不是固定高度，这种方法不管用

Answer 3

display: flex;
flex: 1;