VirtualScroll out of wack

Ionic Framework ionic-v3
1

here is what it looks like

and here is my code (I measured the item height by taking a screenshot of all items and measuring one of them) and it seems to be around 110px

I do have lists within lists, not sure if this should be an issue.

<ion-list *ngFor="let range of testService.events.Ranges">
    <ion-list-header>
      {{range.Title}}
      <div item-right clear>
        <ion-badge color="primary"> {{range.Count}}</ion-badge>
      </div>
    </ion-list-header>
    <ion-list [virtualScroll]="range.Events">
      <button approxItemHeight="110px" ion-item *virtualItem="let event" (click)="helperService.showEventDetails(event, navCtrl)">
        <h2>{{event.Name}}</h2>
        <p>{{event.PlaceName}}</p>
        <p>{{event.FullEventDateString}}</p>
             <div class="infoPane">
                <span class="infoBlockSmall">{{event.GenderString}}</span>
                <span class="infoBlockSmall">{{event.AgeStringFull}}</span>
                <span class="infoBlockSmall" *ngIf="event.Cost > 0">  {{event.CostString}}</span>
                <span class="infoBlockSmall" *ngIf="event.Cost == 0 || event.Cost==null">Free</span>
                <span class="infoBlockSmall" *ngIf="event.RepeatedStringFull">{{event.RepeatedStringFull}}</span>
            </div>
      </button>
    </ion-list>

  </ion-list>
2

I don’t think you can mix these two up like this, since virtualScroll depends on precalculating space it should occupy.