How to make the row stretch remaining height

Bootstrap 4.1.0 has a utility class for flex-grow which it what you need for the row to fill the remaining height. You can add a custom “fill” class for this. You also have to make sure the container is full height.

The class name in Bootstrap 4.1 is flex-grow-1

<style>
html,body{
    height:100%;
}

.flex-fill {
    flex:1;
}
</style>

<div class="container-fluid d-flex h-100 flex-column">
    <!-- I want this container to stretch to the height of the parent -->
    <div class="row">
        <div class="col">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row bg-light flex-fill d-flex justify-content-start">
        <!-- I want this row height to filled the remaining height -->
        <div class="col portlet-container portlet-dropzone">
            <!-- if row is not the right to stretch the remaining height, this column also fine -->
            Content
        </div>
    </div>
</div>

https://www.codeply.com/p/gfitG8PkNE

Related: Bootstrap 4 make nested row fill parent that has been made to fill viewport height using flex-grow