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

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?

CodePudding user response：

Can you try something like this?

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

CodePudding user response：

The above answer worked for me, for my specific case I had to set the wrapping element's height and width to 100%

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

// CSS

.wrapper {
  width: 100%;
  height: 100%;
 }