Как использовать flexbox в angular2?

Question

[Skrolea]

Добрый день. Хочу использовать флексбокс в angular2 проекте. У меня на странице есть верхний toolbar, ниже navbar, еще ниже непосредственно router-outlet, с которым я хочу, чтобы он тянулся на всю высоту, точней, имел свойство flex:1, что позволит растянуть его на всё оставшееся место. Angular2 генерит такой DOM

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

В body у меня стоит flex-direction: column;, sd-toolbar и sd-navbar имеют фиксированную высоту, но вот sd-home никак не хочет заполнять всё оставшееся пространство. Или flex:1 надо задавать для router-outlet?
Вот код . К сожалению планкер у меня отказывается воспринимать :host, так что стили в style.css

Answer 1

[Андрей]

Попробуйте
flex: 1 1 auto;

Answer 2

[DTX]

Так почему flex стоит в боди, а не в my-app??

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

Ну и min-height в 100 выставить для my-app

Чет не хочет планкет стили пережевывать.
Вот так должно работать:

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;
}