полная высота ion-карты в ионном слайде

Question

Я пытаюсь заставить ионную карту реагировать на ионный слайд. Адаптивная сетка работает в карте, но когда я добавляю ион-слайды и ион-слайд-элемент, это не так. У вас есть идея, что мне не хватает? Я думаю, что это может быть связано с не унаследованной высотой от слайда, но я не могу понять, как это сделать. Помещение одного и того же кода css для ионной карты в ионы и слайды не помогает.

Заранее большое спасибо за помощь!

Харун

HTML:

 <ion-slides>
<ion-slide>
  <ion-card>
      <ion-grid>
        <ion-row class="row1">
          <ion-col>
            ROW 1
          </ion-col>
        </ion-row>
        <ion-row class="row2">
          <ion-col>
            ROW 2
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card>
</ion-slide>

CSS:

  ion-grid {
    height: 100%;
    padding: 0;
  }

  ion-card {
    height: 100%;
    padding: 0;
    display: flex;
    border: 3px solid green;
  }

  .row1 {
    height: 100%;
    flex: 1;
    border: 3px solid orange;
  }

  .row2 {
    height: 100%;
    flex: 2;
    border: 3px solid red;
  }