The ion-footer is not showing when my ion-content has elements

In this code the footer doesn't appear :

<ion-content>
  <div class="text-center">
    <p class="text-gray-800 text-3xl font-bold m-0">{{user.name}}</p>
    <p class="text-gray-400 mt-2">{{user['custom:role']}}</p>
  </div>
  <ion-button expand="block" color="primary">logout</ion-button>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

And that works :

<ion-content>
  <ion-button expand="block" color="primary" (click)="cognito.logout()">logout</ion-button>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

I have tried to remove div and p tags using ion-text or to remove the button and keep only the p / ion-text

But I cannot make the footer show up with content (except the ion-button) in my ion-content.

I for the moment use some css, without ion-footer. I'd rather find a non-hacky solution.