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

user_65659 0
Viewed 263

I'm working on a details page that draws data from a database. The details page could have related data from two other tables, both of which might have no or many records to display.

The basic structure looks like this (using 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>

The CSS for the scrolling class is:

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

This works and nearly gives me what I want, but I'd like for each of the scrolling divs to shrink if the extra space isn't needed. How can I do that with either existing Bootstrap features or additional CSS?

bootstrap-4 scroll css html
1 Answers

A little more Googling solved the problem. This seems to work as I wanted:

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