css元素高度的布局问题?

Question

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

.box {
    height: 300px;
    background-color: red;
}

在css中，div的宽度默认独占一行，而高度需要手动设置。
上面的布局，box 高度 300
box1的高度未知，可能是100，可能是50
box2的高度如何占满余下空间？
如果box1高度为 100，那么box2高度应该是200，且不会受box2内部元素的高度影响。
如果box1高度为100且margin-bottom: 10px，那么box2高度应该为 190px。
如果box2上面有n个盒子，box2的高度应该是 box - n个盒子高度的余下值。
请问这种高度自适应的布局，各位是怎么实现的？有没有比较好的方法？

Answer 1

用flex布局即可

.box {
    display: flex;
    flex-direction: column;
}
.box2{
    flex: 1;
}

Answer 2

.box {
    height: 300px;
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid red;
    background: cyan;
}

.box1 {
    height: 100px;
    margin-bottom: 10px;
    background-color: blue;
}

.box2 {
    overflow: scroll; // 内部元素溢出滚动
    background-color: lightblue;
}

网格布局也可实现