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

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类的CSS是：

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

这很有效，几乎给了我想要的，但如果不需要额外的空间，我希望每个滚动的divs都能缩小。如何使用现有的Bootstrap功能或额外的CSS来做到这一点？

Answer 1

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

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