Сделайте прокручиваемый div автоматически изменяющим высоту до родительского div в bootstrap столбце строки карты

Question

У меня есть проблема, которую я почти решил, но мог бы помочь с выполнением миссии. Я создаю веб-сайт, используя bootstrap на одной странице, которая использует макет сетки с фиксированной высотой карты, на которой хранится содержимое.

Я уже почти все закончил, но теперь я уверен, страница реагирует на все точки останова (с использованием загрузочных рекомендованных размеров точек останова). Мне удалось использовать функции d-flex / display: flex, однако у меня осталась одна проблема.

1. Я не могу заставить столбец div прокрутки inner_remaining сидеть внутри родительской строки div на либо маленькие, либо средние точки останова.

Я выполнил задачу, заключив в том, чтобы столбец прокрутки находился внутри родительского элемента, а не в контексте начальной строки, столбца, сетки. Если бы кто-то мог указать мне правильное направление, это было бы полезно.

Я также посмотрел на веб-сайте W3 для flex box, но все еще не могу заставить его работать, и мне нужно сохранить отзывчивый характер, поэтому на средней точке останова дивы сидят в ряду, а на небольшой точке останова - в столбце. Правая сторона inner_remaining div будет отображать динамически генерируемый контент переменных размеров, поэтому он должен прокручиваться и автоматически реагировать. Мой код ниже ....

<div class="container body-content justify-content-center">

    <div class="row">

        <div class="col-sm-12">

            <div class="card" style="color: black;height: 400px">
                <div class="card-body">

                    <div class="row" id="outer">
                        <div class="col-sm-12 col-md-6" id="inner_fixed">

                            I am fixed height<br />
                            I am fixed height<br />
                            I am fixed height<br />

                        </div>
                        <div class="col-sm-12 col-md-6" id="inner_remaining">

                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />
                                I take up the remaining height<br />

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

CSS Точки останова

Маленький

    #outer {
    display: flex;
    flex-flow: column;
    /*height: 100%;*/
    /*flex-direction: column;*/
}

#inner_remaining {
    background-color: #DDDDDD;
    flex-grow: inherit;
    flex-shrink: inherit;
    flex-basis: auto;
    margin: auto;
    overflow-y: scroll;
    /*flex: 1 1 1;*/
    /*min-height: 0;*/
    /*flex-direction: column;*/
}

Средний

    #outer {
    display: flex;
    flex-flow: row;
    height: 100%;
    /*flex-direction: row;*/
}

#inner_remaining {
    background-color: #DDDDDD;
    flex-grow: 1;
    overflow-y: scroll;
    flex: 1 1 0;
    min-height: 0;
    /*flex-direction: column;*/
}

Основной

#inner_fixed {
height: 100px;
background-color: grey;

}