Ion-list inside a grid col has no height

I have a child list component inside a column in a grid. The list has no height. I want it to full the full height of the page.

The ion-content inside the child seems to have no height. The list itself is still there and has height. If I remove the child ion-content, the list appears ok, but I assume it won’t be scrollable on smaller devices.

What is the recommended best practice for nesting components to get full width and height of parent containers?


<ion-content padding>
      <ion-col col-4>
      <ion-col col-4>

      <ion-col col-4>



    <button ion-item *ngFor="let item of items">
      <ion-icon item-start></ion-icon>
      <div class="item-note" item-end>