Angular flex layout: Parent element with fxLayout="column" affects height not width of child element

I have a parent element that applies fxLayout="column".
Inside the parent element I have a child element that applies fxFlex="80".

In this case, fxFlex="80" affects the height of the child element not the width.
I get the expected result when changing the parent flex-layout to row.

How can I achieve the expected results with fxLayout="column" and still using this declarative style?

>Solution :

Can you try something like this?

<div fxLayout="row">
  <div fxLayout="column" fxFlex="80">
    <!-- place other elements here -->
  <div>
</div>

Leave a Reply