Ionic-content won't change size if more space become available in the page

Ionic Framework Ionic Angular
1

I want to hide the ion-footer when I am scrolling down the page,

when I scroll down on ion-content, I set a css class on the ion-footer which set translateY and footer smoothly move out of the way

ion-footer {
  transition: all 0.5s ease;
  &.scrollDown {
    background-color: red;
    transform: translateY(50px);
  }
}

but the issue is with ion-content, even if the ion-footer go out of the page, the ion-content won’t change the size, I traveresed every single part of the dom but couldn’t figure out how to make the ion-content to resize.

I tried to make the position of the ion-content to initial and it works just well,

ion-content,
ion-content::part(scroll) {
  position: initial;
  overflow: scroll;
}

but after this solution issue is that the ionScroll isn’t working anymore

so the question is how do I make the ion-content to fill up the space if one component like ion-footer or ion-header translateY out of the page?