высота столбца начальной загрузки 4 равна высоте родного брата с большим прокручиваемым содержимым

Question

Я хочу, чтобы высота столбца была такой же, как у его родного брата. Как сделать так, чтобы у дочерних элементов столбца была определенная высота, чтобы заполнить оставшееся пространство, тогда как у этих дочерних элементов слишком большой контент. демо: https://stackblitz.com/edit/empty-xgvdqz?file=index.html

Answer 1

Вы можете использовать flexbox (d-flex flex-column) и другой div "wrapper". Затем сделайте внутреннюю прокручиваемую позицию div абсолютной.

.wrapper {
  position: relative;
  flex: 1 1 auto;
}
.scroll {
  position: absolute;
  top: 0; bottom: 0;
  overflow-y: auto;
  width: 100%;
}

<div class="container">
    <div class="row py-4 border border-secondary">
        <div class="col-5 py-3 border border-primary">
            <p>I want to dictate my neighbouring column's height to be equal to me, but right now it's the other way around</p>
            <div class="border border-warning p-1" style="height: 150px;">
                filler content (height: 150px;)
            </div>
        </div>
        <div class="offset-1 col-5 py-3 border border-primary d-flex flex-column position-relative">
            <p class="flex-shrink-1">I <strong><u>do not want</u> </strong> to be scrollable</p>
            <div class="border border-warning p-1 wrapper">
                <div class="scroll">
                    <p>I <strong><u>want </u></strong> to be scrollable</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                    <p>Filler, filler, filler, filler</p>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/ehrZhUN8qL
https://stackblitz.com/edit/empty-e3uh4c?file=index.html