<div class="container">
    <div class="box box-1">box 1</div>
    <div class="box box-2">box 2</div>
    <div class="box box-3">
        <table>
            <tr><td>1</td></tr>
            <tr><td>2</td></tr>
            <tr><td>3</td></tr>
            <tr><td>4</td></tr>
            <tr><td>5</td></tr>
            <tr><td>6</td></tr>
            <tr><td>7</td></tr>
            <tr><td>8</td></tr>
            <tr><td>9</td></tr>
            <tr><td>10</td></tr>
        </table>
    </div>
</div>

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;

    .box {
        text-align: center;
        color: white;
        font-family: sans-serif;
        font-size: 36px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .box-1 {
        background-color: green;
        height: 10vh;
    }

    .box-2 {
        background-color: blue;
        height: 20vh;
    }

    .box-3 {
        background-color: red;
        flex: 1;

    }
}