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?
Thanks,
Donnie
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-4>
<list-sections></list-sections>
</ion-col>
<ion-col col-4>
</ion-col>
<ion-col col-4>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-content>
<ion-list>
<button ion-item *ngFor="let item of items">
<ion-icon item-start></ion-icon>
{{item.title}}
<div class="item-note" item-end>
{{item.note}}
</div>
</button>
</ion-list>
</ion-content>