scrollTop behaves erratically when item to be scrolled to top is last or close to end of nested

Question

I have a problem with scrollTop that partially works that I will try to describe. First to get it work I applied the solution found here. I have an angular component that renders a list of nested angular components in it using *ngFor. Snippet follows (parent):

<div id="scrollable-container" class="scrollable">
<div *ngIf="isAccountsToShow" class="top-row-spacing">
    <div *ngIf="accountsToggle">
        <div class="grid-x ruler">
            <div class="small-4 cell">
                <div class="text-left sub-header">Header 1</div>
            </div>
            <div class="small-1 cell">
                <div class="text-left sub-header">Header 2</div>
            </div>
            <div class="small-2 cell">
                <div class="text-center sub-header">Header 3</div>
            </div>
            <div class="small-2 cell">
                <div class="text-center sub-header">Header 4</div>
            </div>
            <div class="small-3 cell">
                <div class="text-center sub-header">Header 5</div>
            </div>
        </div>
        <div *ngFor="let data of displayAccounts">
            <member-product 
            [memberNumber]="mnum" 
            id={{data.accountNumber}} 
            (scrollIntoView)="scrollToView(data.accountNumber)"
                [product]="data" </member-product> 
            </div> 
        </div> 
    </div> 
</div>

The child's html contains info on each header and in addition a ellipsis toggle at the far right that looks like this: screenshot of a single element (Apparently I need more reputation points to fully add a screenshot. Hope it helps anyway).

The problem: everytime I click the ellipsis it will expand the account information (NOTE: this is NOT another angular nested component) to reveal even more information AND the account clicked will autoscroll to the top. screenshot of expanded widgetThis works for the first accounts considering that there might be dozens or even hundreds but will fail to scroll only for the last few and it will fail gradually, meaning that it will begin to scroll less closer to the top of its container until the very last item which will not scroll at all. Also it fails when only a few elements are displayed causing no overflow-y where the scrolling simply does not happen.

Scroll code: (I'm using event emitter here as you might have already noticed)

scrollToView(accountNumber): void {
    var element = document.getElementById(accountNumber);
    var topPos = element.offsetTop;
    document.getElementById('scrollable-container').scrollTop = topPos - 10;
}

Css code:

.scrollable {
    max-height: 24rem;
    position: relative;
}

I not quite sure if this is an overflow-y related issue or what. I am completely puzzled with this. Searching for this very particular problem in Stackoverflow yielded no results, be it angular be it jquery although it doesn't apply to my angular 2 scenario.

I appreciate any insight or help on the matter.