Ionic 6 & Vue 3 | Ion-Modal with Fixed Header, Cutting off Content

I am trying to make an ion-modal with a fixed header.

When I use the following template, the bottom of my content is cut off from the viewport (big red arrow pointing to missing blue button)

Check out the screenshot.

Can anyone help me find the right template to make an ion-modal with a fixed ion-header?

Template:

<ion-modal>
  <ion-header>
     Page 1 Answers
  </ion-header>

  <ion-content>
    ** multiple choice divs
  </ion-content>
</ion-modal>

curious why you are even using a modal here… seems like an uncommon UI pattern

I think having a modal with a fixed header and scrollable content is an extremely common design pattern. I interact with apps on a daily basis that utilize this pattern.

Design pattern aside, a modal should be able to have a fixed header and scrollable content.

In Ionic 4 with Angular I am able to create a ion-modal with a fixed header.

Is this no longer possible in Ionic 6?