上下布局，高度不固定，上下div怎么分别自适应

Question

父级div高度不固定
有两个子div，上下布局，下边的高度100px固定在底部，上边子div高度自适应怎么搞呢

Answer 1

<div class="box-main">
    <div class="top-box"></div>
    <div class="bottom-box"></div>
</div>

.box-main{
    display:flex;
    flex-direction: column;
    .top-box{
        flex: 1;
    }
    .bottom-box{
        flex: 0 0 100px;
    }
}