Force ion-scroll to fill space between two divs

Ionic Framework ionic-v3
1

One page of my app has a portion which is scrollable. I am using the ion-grid system to help position things on my page. Here is a simplified version of the markup:

 <ion-content>
    	<ion-row>
    	    <ion-col>
                Some Content
            </ion-col>
    	</ion-row>
    	<ion-scroll scrollY="true" id="fillSpace">
            <ion-row *ngFor="let item of items">
    		<ion-col>
    			<item-related-directive></item-related-directive>
    		</ion-col>
            </ion-row>
        </ion-scroll>    	
        <div id="pageBottom">
           <ion-row>
              <ion-col>
  		  Some more content
              </ion-col>
           </ion-row>
           <ion-row>
    		<button (click)="goToOtherPage()">Go</button>
           </ion-row>
       </div>
</ion-content>

And some of the relevant CSS:

#pageBottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding-bottom: 10%;
}

I am trying to make the with the id #fillSpace to fill the space between the div below it and the ion-row above it. Because the ion-scroll consists of a varying amount of rows, I need a way of making that whole scroll section fill space between the ion-row and the div to make it look good across various screen sizes. Thanks for any help.

2

I should also add that I tried using flexbox as in this StackOverflow example, but did not get successful results.

3

I wasn’t able to find a better solution, so I removed the ion-row at the top to an tag, and the #pageBottom content to an .