css元素高度占满余下空间

在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个盒子高度的余下值。
两种方法：
1、flex布局

.box {
    height: 300px;
    display: flex; // flex布局
    flex-direction: column; // 设置排列方式
    border: 1px solid red;
}

.box1 {
    height: 100px; // 设置固定高度，该高度可能是动态的
    margin-bottom: 10px;
    background-color: blue;
}

.box2 {
    flex: 1; // 元素大小 使用 flex: 1; 来占据剩余空间
    overflow: scroll; // flex布局会受到内部元素的大小影响(因为是动态的弹性盒子)，所以设置溢出滚动，否则会撑开盒子。
    background-color: green;
}

2、网格布局

.box {
    height: 300px;
    display: grid; // 网格布局
    grid-template-rows: auto 1fr;  /* 第一行高度自适应，第二行占据剩余空间 */
    border: 1px solid red;
}

.box1 {
    /* 假设 height 为 100px，但这里不需要明确设置，因为使用了 auto */
    height: 100px;
    margin-bottom: 10px;
    background-color: blue;
}

.box2 {
    /* 在 Grid 布局中，1fr 代表剩余空间的一个分数单位，由于第一行自适应，剩下空间就是该盒子的高度 */
    overflow: scroll;
    background-color: lightblue;
}

注意点：
1、box2盒子如果想不受子盒子高度影响，需要设置overflow：scroll或hidden，否则子盒子撑高box2.
2、box2如果不设置overflow，子元素高度可能会溢出，导致无法滚动或滚动条无法显示。
3、flex布局的兼容性好点，grid由于出的时间比flex晚，导致部分浏览器不兼容，需要查询一下浏览器兼容性。
4、flex和grid现代浏览器以及最近两个版本全部支持，如果使用IE或Opera Mini，则flex兼容性更好。