如何将可滚动列表设置为具有最大大小但在不需要时缩小？

Question

我正在处理从数据库中提取数据的详细信息页面。详细信息页面可能有来自其他两个表的相关数据，这两个表可能没有或有很多记录要显示。

基本结构如下所示（使用 Bootstrap）：

<div class="scrolling">
    <h2>First Group of Records</h2>
    <ul class="list-group">
        <li class="list-group-item">
            Related record details
        </li>
        ...
    </ul>
</div>
<div class="scrolling">
    <h2>Second Group of Records</h2>
    <ul class="list-group">
        <li class="list-group-item">
            Related record details
        </li>
        ...
    </ul>
</div>

scrolling class 的 CSS 是：

.scrolling {
    height: 30%;
    overflow-y: scroll
}

这很有效，几乎可以满足我的需求，但如果不需要额外的 space，我希望每个滚动 divs 都能缩小。我如何使用现有的 Bootstrap 功能或额外的 CSS？

Answer 1

多一点谷歌搜索解决了这个问题。这似乎如我所愿：

.scrolling {
    height: 30%;
    resize: both;
    overflow-y: scroll;
}

如何将可滚动列表设置为具有最大大小但在不需要时缩小？

How do I set a scrollable list to have a maximum size but shrink when it's not needed?

html

css

scroll

bootstrap-4