How to use flexbox in angular2?

Question

css

Good afternoon. I want to use flexbox in an angular2 project. I have a top toolbar on the page, below the navbar, even below the router-outlet itself, with which I want it to stretch to its full height, more precisely, have the flex: 1 property, which will allow it to stretch to the rest of the space. Angular2 generates this DOM

<my-app>
        <sd-toolbar> </sd-toolbar>
        <sd-navbar></sd-navbar>
         <router-outlet></router-outlet>
          <sd-home></sd-home> 
 </my-app>

In body I have flex-direction: column;, sd-toolbar and sd-navbar have a fixed height, but sd-home does not want to fill all the remaining space. Or should flex:1 be set for router-outlet?
Here is the code . Unfortunately, the plunker refuses to accept :host for me, so the styles in style.css

Answer 1

Try
flex: 1 1 auto;

Answer 2

So why is flex in body and not in my-app??

my-app {
    display: flex;
    flex-direction: column;
}

Well, set the min-height to 100 for my-app
Chet doesn't want to chew on plank styles.
This is how it should work:

html {
  min-height: 100%;
  height: 100%;
}
body {
  min-height: 100%;
  height: 100%;
  padding: 0;
}
my-app {
  height: 100%;
  margin: 0;
  padding: 0 15px;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex: auto;
}