CSS3 responsive overflow of child content

I search to make a dynamic overflow

<!-- bootstrap 4 included -->
<style>
header-1{
    height: 115 px;
}
.container-1: {
    height: calc(100vh - 115px)
}
.child: {
    height:  100%;
}
.sub-child: {
    max-height:  100%;
}
</style>

<div class="header-1"></div>

<div class="container-1">
    <div class="child">
        <div class="row justify-content-center border border-info" style="height: 100%">
            <!-- content container -->
            <div class="border border-primary sub-child">
                <!-- header -->
                <div class="header">title</div>
                
                <!-- content --><!-- this need to be scrollable if needed -->
                <div class="content overflow-auto"></div>
                
                <!-- footer -->
                <div class="footer">footer</div>
            </div>
        </div>
    </div>
</div>

what I'm searching to do is making the content to be scrollable. without having to fix sizes. I want to avoid so much as possible to use fixed sizes like px,...

So I would like is that the content grow until he parent arrive to 100% of it size and that after the scroll take over the resize of the content.

thanks

edit

this is the display

my container is suppose to be in the center but it is taking all the width with flex-column

enter image description here

and here is the way it should look like but with the header & footer on top & bottom

enter image description here