html - bootstrap 4列的高度等于具有较大可滚动内容的同级高度

我想规定一个列的高度和它的兄弟一样。如何使列的子级具有一定的高度来填充剩余空间，而这些子级的内容太大。
演示：
https://stackblitz.com/edit/empty-xgvdqz?file=index.html

最佳答案

您可以使用flexbox（d-flex flex-column）和另一个“wrapper”div。然后将内部可滚动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