Ion-content is a component, and has "stuff" inside it. Depending on which version of Ionic you are using, this stuff may be different, so you will have to go to the documentation for the component and also probably examine it in the DOM, since the documentation is unlikely to be clear enough.

In the case of Ionic 7, the ion-content has 2 inner css shadow parts: scroll and background. I just targetted them one at a time to see which one was relevant:

/* Essential for Flexbox to work inside ion-content (correct @ Ionic 7) */
ion-content::part(scroll) {
  display: flex;
  flex-direction: column;
}

/** Flexbox child element */
.page-content {
  flex: 1; // *
  display: flex; // nested children: {form, social & auth-link}
  flex-direction: column;
  padding: 20px;
  justify-content: space-between; // space out children equally (along primary axis)
}

This sorted the issue out, I assume by giving flexbox the information needed about it's parent. It is necessary to define the flex-direction: column at each level, or it breaks. Also, flex: 1; is needed, or else the page-content doesn't actually stretch to fill the available space.

P.S. Could the person who voted to close this question please illuminate us all why it isn't a valid question? It seems to me that there is good content here?!