Flexbox has no effect within ion-content?

Ionic Framework ionic-v3
1

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">
  </form>
  <button clear>Forgot Password</button>
  <button clear>Sign Up</button>
</ion-content>
```

```
.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
```
2

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.