Boostrap нарисуйте две панели на одном столбце

Question

Моя цель в основном такова:

+-----------------------------+
|      A      ||      B       |
+-----------------------------+
|             ||              |
|             ||              |
|             ||      Btext   |
|             ||              |
|     Atext   ||              |
|             ||              |
|             |---------------|
|             |               |
|             |               |
|             |               |
|             |               |
|             |     Ctext     |
|             |               |
|             |               |
|             |               |
+-------------+---------------+

У меня есть следующий фрагмент:

<div class="row" style="padding-top:10px;margin:0px;">
    <div class="col-md-6">
        <h3><span id="headerLeftPlanel">A</span>&nbsp;<i class="fas fa-exchange-alt"></i></h3>
        <hr />
    </div>
    <div class="col-md-6">
        <h3>B</h3>
        <hr />
    </div>
</div>
<div class="row" style="padding-top:10px;margin:0px;">
    <div class="col-md-6" style="max-height: 92vh;overflow-y: scroll;">

    </div>
    <div class="col-md-6" style="overflow-y: scroll;">
        <div class="row" style="min-height:40%">
            <div class="col-md-12" style="overflow-y: scroll;">
                BText
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="overflow-y: scroll;">
               Ctext
            </div>
        </div>
    </div>
</div>

Однако мои BText и CText не соответствуют высоте страницы. Какой макет лучше использовать? Я пытался установить min-height на BText, но это не сработало, две строки сжались.

Answer 1

Они не регулируются, потому что вы не определили высоту ни в левом, ни в правом контейнере. Вы определили max-height: 92vh в левом контейнере и min-height: 40% в правом контейнере, установив для правого минимальное значение 40% высоты левого контейнера. Это приводит к описанной вами проблеме:

You can solve this by either:

1. Defining a height on the left container like height: 92vh. See скрипка здесь
2. Определение высоты в правом контейнере, например min-height: 40vh. См. скрипку здесь

Результат следующий:

Результат