Nested component view not rendering on iPad


#1

The parent container contains a grid with couple rows, cols, and a nested component within.

<ion-grid>
   <ion-row>
      <ion-col>
         <my-component [data]="things"></my-component>
      </ion-col>
   </ion-row>
</ion-grid>

isn’t rendering on iPad in either chrome, or safari. It contains a wrapping ion-scroll container. It only shows about a 20px glimpse of it. When I take a look, the child component doesn’t have a height set, so I’ve added flex: 1 1 auto; to the row, then added height: 100% to my-compnent, and then height: inherit to the ion-scroll, and this makes it render on every single device/resolution except for iPad.

Here is a link to the result. The bar gray atop is my-component not fully rendering. - https://imagebin.ca/v/3iBDlI2rYGKw


#2

Ok, determined that the ion-scroll needs an explicit height to display, ie. 100vh, 500px, etc. WHat I really need it to do is consume the height of the parent container, which is an ion-grid > ion-row > ion-col.