子div自适应父级元素剩余空间

以如下问题为例，给出两种解决方案：

问题：一个div占据浏览器整个视窗，内部一div宽高固定时，如何实现另一内部div自适应剩余空间？

<div class="farther-panel">
     <div class="childA-cls"></div>
     <div class="childB-cls"></div>
</div>

方案一：（box-sizing:border-box）

.farther-panel {
    width: 100%;
    height: 100%;
    padding: 100px 0 0;
    background-color: red;
    box-sizing: border-box;
}
        
.farther-panel .childA-cls {
    width: 100px;
    height: 100px;
    margin: -100px 0 0;
    background: blue;
}
        
.farther-panel .childB-cls {
    width: 100%;
    height: 100%;
    background: green;
    overflow-y: auto;
}

方案二：（box-sizing:border-box  +  position:absolute）

.farther-panel {
    width: 100%;
    height: 100%;
    padding: 100px 0 0;
    box-sizing: border-box;
    position: relative;
    background: red;
}
            
.farther-panel .childA-cls {
    width: 100%;
    height: 100px;
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
}
            
.farther-panel .childB-cls {
    width: 100%;
    height: 100%;
    background: green;

}