`flex-direction: row; box-sizing: border-box; display: flex;` added automatically

I am seeing flex-direction: row; box-sizing: border-box; display: flex;added on my component that is rendered in the router-outlet.

My app.component.html looks like

<pro-header *ngIf="!headless"></pro-header>
<router-outlet></router-outlet>
<pro-footer *ngIf="!headless"></pro-footer>

The router-outlet will render a component which I give a class fxFlex via

@HostBinding( 'class.fxFlex') true;

so it is flexed. However, when the components root DIV uses fxLayout column WITH an fxFlex, like

<div fxLayout="column" fxLayoutAlign="center center" fxFlex>

it automatically adds flex-direction row to its parent. The rendered html will be like

<pro-header *ngIf="!headless"></pro-header>
<router-outlet></router-outlet>
<pro-securing style="flex-direction: row; box-sizing: border-box; display: flex;">
....
</pro-securing>
<pro-footer *ngIf="!headless"></pro-footer>

This row layout on the pro-securing component creates the side effect that when the footer becomes large, it pushes the pro-securing into the header. It doesn’t allow a scrollbar.

I find this a bit strange behaviour. I am looking for a header, content (can expand) and sticky footer. Scroll bar should automatically engage when content is larger then header+content+footer.

Any thoughts?

[mattiLeBlanc]

@CaerusKaru Thanks for answering. I can’t overwrite the parent since that is a component that is loaded by the router. I can’t add a fxLayout via hostbinding to the component annotation, since it is not compiled by angular. If I wrap my component with a div, then I think that Div has the same problem that it is not stretching the body.

I am just experiencing a little bit of a different behaviour setting up my sticky footer with the new flex layout and Angular 4 compared to Angular 1.6 and the flexlayout version from Material Design.

[rosslavery]

This is the same as #263, and it was resolved in #365 .

The fix is to use the stylesheet of the routed component to set the correct flex layout you desire (row / column).

This way you do not need to depend on adding the fxLayout attribute to a non-existent dom element, or using HostBinding etc.