Angular 6. fxLayout colum does not work

Question

Angular 6. fxLayout colum does not work

Navigation

#1 by (0 votes)

0

I'm trying to make item1 occupy 50% of the height of the red container, and that item 2 occupy the other 50% of the remaining height of the red container, if this works, all the red background will be hidden, but it is not.

<div style="height: 300px; background-color: red">
<div fxLayout="column" >
  <div  fxFlex="50" style="background-color: blue">Item 1</div>  
  <div  fxFlex="50" style="background-color: yellow">Item 2</div>  
</div>
</div>

This is what I want:

And this is what I get:

Can someone correct my code?

Thank you very much.

angular flex

asked by adrian 28.08.2018 в 21:13

source

1 answer

How to migrate this javascript code to typescript Link subdomain from route 53 to shared hosting subdomain

score 0 · Accepted Answer

It is for the higher div, remove it and add style in the second div should look like this:

<div fxLayout="column" style="height: 300px; background-color: red">
  <div fxFlex="50" style="background-color: blue">Item 1</div>  
  <div fxFlex="50" style="background-color: yellow">Item 2</div>  
</div>