<div
    class="colwarp"
    style="display: flex; flex-direction: column; height: 100%; background-color: #bbf;justify-content:space-between; overflow: hidden;"
>
    <div class="col-1" style="background-color: #f00;">
        <div style="height: 200px"></div>
    </div>
    <div class="col-2" style="background-color: #ff0;flex-grow:1; height: 0">
        <div style="background-color: #898989;overflow: auto; height: 100%; ">
            11<br />11<br />11<br />11<br />11<br />11<br />22<br />22<br />22<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />11<br />
        </div>
    </div>
</div>

注意：最外层的height：0很重要

简化版：
html

<div class="file-data-table">
        <table class="file-table-style">
            <th>123</th>
            <tr ><td >123</td></tr>
                                    ···
                        <tr ><td >123</td></tr>
        </table>
    </div>

scss

.file-data-table {
        display: flex;
        flex-direction: column;
        height: 100px;
        justify-content: space-between;
        overflow: auto;

        .file-table-style {
            flex-grow: 1;
            height: 0;
        }
    }