enforcing height of tree control

[satnar]

I am using ng2-tree in an angular7 project with bootstrap4. All is well and nothing to complain. In one of the pages, I had some data items about 100+ and that when I noticed that the tree is being rendered through out the page. I could understand this behaviour as I have seen similar with nav tabs/panes where the content differ aross. For the sake of consistent user experience, I add style="height: 300px" to the enclosing canvas and they all work quite well, with the panes with larger content now has scroll bars.

I tried the same with the tree control with the following html:

<div class="row">
    <div class="card shadow">
        <div class="card-body" style="height: 300px">
            <tree #mpTree [tree]="mdlTreeView" (menuItemSelected)="treeMenuClicked($event)"></tree>
        </div>
    </div>
</div>

Now all other elements in page seem to behave in compliance, except the tree content overflow and spill over and juxtaposing over the rest of the content in the page.

So what I want to achieve a height configurtion to make it behave more like a list box that gets a scollbar when more items are inside. Is there a good way to do this? I will be very thankful if you could help with a CSS hack for the moment, until we can get a permanent good clean solution.

Thanks a ton in advance. :)