How to distribute div boxes vertically in bootstrap 4

Given some DIV boxes as follows:

bootply here

    </div>
    <div class="col-4">
        <div style="border: 1px solid darkorange; margin: 1em;">BOX1</div>
        <div style="border: 1px solid darkorange; margin: 1em;">BOX2</div>
        <div style="border: 1px solid darkorange; margin: 1em;">BOX3</div>
    </div>

within a body that is set to 100vh height,

How do I use flexbox to make the green bordered DIV take up all the remaining vertical space in the container, and space out BOX1, BOX2, and BOX3 so that they all share an equal height within the container taking up as much vertical space as possible.

I have tried this:

body {
    height: 100vh;
}
ng-component { width: 100%; }
div.app {
    height: 100%;
    display: flex;      
    border: 1px solid red;
    margin: 1px;
}

div.container-fluid {
    display: flex;
    flex-grow: 1;

    border: 2px solid orange;
}