One scrollable column in IonGrid

I have a really simple grid with 1 row and 2 columns, which get stacked, when the window width is too small.

Looks like:

  <ion-grid>
    <ion-row style="height: 100%">
      <ion-col size="12" size-md="5" style="background-color: lightgray">
        <div style="background-color: red; height: 300px">Fixed</div>
      </ion-col>
      <ion-col size="12" size-md="7" style="background-color: lightgray">
        <div style="background-color: blue;">
          <div style="height: 2300px">Should scroll</div>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

here’s the stackblitz:

Problem:
The second blue column should be scrollable so that only the blue column has a scrollbar and the entire grid fits in the window.
I tried a lot, but I can’t get it right for both cases (columns left/right and top/bottom to each other).

Can someone give me a hint, please?