Содержание ионов с ионным списком отображается только в небольшой области моего компонента

Question

На своей странице я использую два компонента рядом друг с другом, например:

<ion-content>
<ion-row>
  <ion-col  size=4>
    <list-component></list-component>
  </ion-col>
  <ion-col size=8>
    <news-component></news-component>
  </ion-col>
</ion-row>

В компоненте списка я хочу использовать прокручиваемый список, подобный этому, из ионных документов:

<ion-list>
    <ion-item>
        <ion-label>Pokémon Yellow</ion-label>
        </ion-item>
        <ion-item>
            <ion-label>Mega Man X</ion-label>
        </ion-item>
</ion-list>

Когда я так использую, прокручивается вся страница, включая новостной компонент. Поэтому я проверил Google и обнаружил, что мне нужно использовать список внутри блока ion-content. Поэтому я попробовал это так:

<ion-content
        [scrollEvents]="true"
        (ionScrollStart)="logScrollStart()"
        (ionScroll)="logScrolling($event)"
        (ionScrollEnd)="logScrollEnd()">
    <ion-list>
        <ion-item>
            <ion-label>Pokémon Yellow</ion-label>
        </ion-item>
        <ion-item>
            <ion-label>Mega Man X</ion-label>
        </ion-item>
    </ion-list>
</ion-content>

Но теперь у меня проблема в том, что список отображается только в небольшом окне, а не во всем компоненте.

Когда я добавляю высоту, как в примере ниже, она работает, но тогда она не динамическая. Я хочу дать ему как 90% от высоты компонента. Но моя магия не настолько сильна, чтобы делать это ... 101

<ion-content style="height: 66vh">

Что я забыл заставить его работать?

Ionic:

Ionic CLI: 5.4.5 (/ usr / local / lib / node_modules / ionic) Ионная структура: @ ionic / angular 4.11.3 @ angular-devkit / build-angular: 0.801.3 @ angular-devkit / schematics: 8.1.3 @ angular / cli: 8.1.3 @ ionic / angular-toolkit: 2.0.0

Утилита:

cordova-res: не установленособственный запуск: не установлен

Система:

NodeJS: v12.4.0 (/ usr / local / bin / node) npm: 6.9.0 ОС: macOS Catalina