bootstrap 4 列高等于同级高度，可滚动内容较大答案

【问题标题】：bootstrap 4 column height equal to sibling height with large scrollable contentbootstrap 4 列高等于同级高度，可滚动内容较大
【发布时间】：2019-04-06 10:22:04
【问题描述】：

我想将列的高度指定为与其同级列的高度相同。如何使列的子项具有一定的高度以填充剩余空间，而这些子项的内容太大。演示： https://stackblitz.com/edit/empty-xgvdqz?file=index.html

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

您可以使用 flexbox (d-flex flex-column) 和另一个“包装器”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

【讨论】：