Flexbox has no effect within ion-content?

This is something weird I’ve been seeing. Flexbox in scss seems to have no impact on the layout if directly within an ion-content. Could somebody please explain why this is so? Or if my understanding is only partial, could you tell why this actually is so?

I have code similar to this.

<ion-content class="login-email">
  <img class='logo' src="./build/img/logo.png" alt="">
  <form #loginCredentials="ngForm">
  <button clear>Forgot Password</button>
  <button clear>Sign Up</button>

.login-email {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-basis: 0; //tried with this and without based on other answers

Shouldn't at least the items be columnar?  But the buttons are in a row.  The items are also not aligned along the center.  

However, if I changed it as below, it works as expected.  i.e. I removed the class from ion-content and put it in a new div within it that holds all the other tags.  Should I always do it like this to make it work?  And if yes, why is that?

Forgot Password Sign Up

Google developer tools => inspect element should tell you exactly why the first case didn’t work. ion-content is a component instead of a simple DOM element, most components have implicit DOM trees you don’t see intuitively if you don’t use a tool like GDT.