Grid Hell - v4

Ionic Framework
1

Hey I’m hoping someone here can help. It’s probably pretty easy but I am lost and have made it way too complex. I went back to square one for this post.

I have this seemingly simple grid, but I need to get the comments situated below the assignment card and stretched to the bottom of the screen (not row, as the row height can and will change). I’ve had various success with inline grids but it got to be a mess css-wise. The comment box has an ion-content inside that will scroll so no need to worry about it.

Capture
Capture.PNG1143×907 42 KB 

<ion-content fullscreen="true">
  <ion-grid no-padding>
    <ion-row no-padding class="ion-wrap">
      <ion-col sizeXl="3" sizeLg="5" no-padding>
        <app-case-assignments-card [case]="$caseReview | async"></app-case-assignments-card>
      </ion-col>
      <ion-col sizeXl="9" sizeLg="7" no-padding>
        <app-response-overview
          [questions]="$caseQuestions | async"
          [reviewData]="$reviewData | async"
        ></app-response-overview>
			</ion-col>
			<ion-col sizeXl="3" sizeLg="5">
					<app-comment-sidebar [items]="$reviewComments | async"></app-comment-sidebar>
			</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
2

Not a full answer, but my first guess would be to add into that grid cell another div. On that div you could then apply some flexbox magic to position those two containers.