Add scrollbar when array returns more then X amount of items (or certain height)

Question

I'm creating an application which allows users to place markers on a canvas rendered map (i'm using openLayers 3 for this). Below the map is the list of currently active markers which users can select and interact with (i.e. make visible/invisible, change color, etc). Now since users can potentially insert infinite amount of markers i want the list to show a scrollwindow after they reach a certain amount of items (for example 3 items). Now in HTML this would be no problem since a regular table would know exactly how many items it contains, however since this is running semi-server sided the amount of items is fetched from the server through an array.

I sort of got it to work using THIS post but it doesnt seem to recognize the items and it adds an unscrollable list.

<div class="scrollingtable">
    <div>
        <div>


<table id="scenario-instances" class="select-list">
    <tbody>
        <th colspan="2">Instanties</th>
        {^{for selectedScenario^instances}}
            <tr data-link="selected{:~isSelected(#data)}">
                <div>
                <td class="fitcontents">
                    <label class="labelCheckbox">
                        <input class="visibility invisibleInput" type="checkbox" name="visibility" data-link="visible" />
                        <span>
                            <img src="images/eye.png"/>
                        </span>
                    </label>
                </td>
                </div>
                <td class="instance-properties">
                    <a class="selected-invisible" href="javascript:void(0)">{{:~getTemplate(templateId).name}}</a>

                    <label class="selected-visible">
                        Template
                        <select data-link="templateId">
                            {^{for ~root.project.templates ~templateId=templateId}}
                                <option data-link="{:name} value{:id} selected{:id === ~templateId}"></option>
                            {{/for}}
                        </select>
                    </label>
                </td>
            </tr>
        {{/for}}
    </tbody>
</table>
</div>
</div>
</div>

(there is some JS and OL3 slang in there but that should not impact the functionality.

The CSS i have so far:

/*Scrollingtable*/

.scrollingtable {
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    width: auto; 
    height: 100px; 
    line-height: 20px;
    padding-top: 20px;
    text-align: left;
}
.scrollingtable > div:before {
    top: 0;
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    left: 0;
}
.scrollingtable > div > div {
    max-height: 100%;
    overflow: scroll; 
    overflow-x: hidden;
    border: 1px solid black;
}

Screenshot of above code in action.

If anyone knows how to get a scrollbar only when it reaches a set number of items or a certain height and would be willing to tell me, that would be amazing.

(the scrollbar shouldn't always be visible though, if there are only 1 or 2 items or it doesnt reach the minimum height it shouldnt show)

Thanks in advance!