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

Я пытаюсь сделать ионную карту, реагирующую в ион-слайде. Ответная сетка работает на карте, но когда я добавляю ионные слайды и элемент с ионным слайдом, это не так. У вас есть идея, что мне не хватает? Я думаю, что это может иметь какое-то отношение к не унаследованной высоте от слайда, но я не могу понять, как это сделать. Внесение того же кода 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;
  }