<div class="box">
    <div class="box1"></div>
    <div class="box2">
        <div style="height: 500px;border: 1px solid gold;"> </div>
    </div>
</div>

在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兼容性更好。