ScrollView takes too much space


#1

So as you can see on the following picture my Bottombar gets cutted in half because of the movements appearing on top.

My HTML Code:

<FlexboxLayout flexDirection="column">
  <ActionBar fontSize="30" title="Account Transactions" backgroundColor="transparent" color="white">
    <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" (tap)="onNavBtnTap()" [nsRouterLink]="['/main']" pageTransition="slideRight"></NavigationButton>
    <ActionItem (tap)="onEdit()" icon="res://ic_today_white_24dp" ios.position="right" visibility="{{ isEditing ? 'collapse' : 'visible' }}" [nsRouterLink]="['/main']" pageTransition="fade"></ActionItem>
  </ActionBar>
  <ScrollView flexGrow="1" (scroll)="onScroll($event)">
    <StackLayout flexGrow="1" >
      <div *ngFor="let item of everything" ; let i="index" class="div1">
        <StackLayout (tap)="details(item.id,item.idDocumento)" marginTop="20" marginLeft="20" marginRight="20" marginBottom="10" backgroundColor="white" [nsRouterLink]="['/main']" pageTransition="slide" borderRadius="5%">
          <GridLayout rows="auto auto auto" columns="* 75">
            <Label class="labelTransactionType" text={{item.idDocumento}} textWrap="true" row="0" col="0" marginTop="10"></Label>
            <Label class="labelTransactionValue" text={{item.value}} textWrap="true" row="1" col="0"></Label>
            <Label class="transactionsButtons" text=">" row="1" col="1" marginTop="-5"></Label>
            <Label class="labelTransactionData" text={{item.date}} textWrap="true" row="2" col="0" marginBottom="10"></Label>
          </GridLayout>
        </StackLayout>
      </div>
    </StackLayout>
 </ScrollView>
  <FlexboxLayout>
    <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
      [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
  </FlexboxLayout>
</FlexboxLayout>

If a user only has 1-3 movements the bottombar displays fine. But if the user has more than 3 movements, in this case it has 10, i create a scrollbar and it cuts the bottombar in half.
My objective is to make the bottombar to its normal size.

Do i have to set a pre-defined size to my scrollview everytime?

Update:

I set a pre-defined height to my scrollView and the Bottombar is working fine now.

  <ScrollView flexGrow="1" height="150" (scroll)="onScroll($event)">

I can also put height = 150, or height = 300, that the picture stays the same why?