How to change fxFlex size on Window Size change?

Question

I have two divs within my main fxLayout Container. They look like this:

Where the red box is the fxLayout Container, the blue box is the Information and the black box is the Chart. As may be noted, the charts div is larger than the information box's div. I would like it to stay this way when resized at all times. In order to achieve this, I have done the following:

information.component.html:

This component is simply a box with several mat-card. It is within a fxLayout container as well.

<div id = "dataInformation" fxLayout="column" fxLayoutAlign="space-evenly center" fxLayoutGap="5%"> 

    <h1>CrowBox Information</h1>
    
    <!-- ...CODE FOR DROPDOWN BUTTON... -->

    <!-- ...EXAMPLE MAT-CARD... -->
    <mat-card>
        <mat-card-title>NICKNAME</mat-card-title>
        <mat-card-content>{{ crowboxNickname }}</mat-card-content>
    </mat-card>


    <!-- ...SAME MAT-CARDS JUST WITH DIFFERENT PROPERTIES... -->

</div>

The only styling applied is width:75% for .mat-card and font related styling.

I then call this component in another component.

data.component.html

In here, I create the charts, call the information.component and place all of this within another fxLayout container. I also specify what should happen if the window is resized. I would like for the size proportions to remain the same when the container goes from a row to a column. However, for some reason, fxFlex.xs does not seem to be working for me and the chart ends up looking really small as can be seen here:

<div class="wrapper" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center" >
    
    <div id = "charts" fxFlex="60" fxFlex.xs="60">
        <!-- THE CHART -->
        <div *ngIf="showCoinsDeposited === false"  >
            <canvas baseChart
                   [datasets]="crowOnPerchChartData"
                   [labels]="crowOnPerchChartLabels"
                   [options]="crowOnPerchChartOptions"
                   [legend]="crowOnPerchChartLegend"
                   [chartType]="crowOnPerchChartType"
                   [colors]="crowOnPerchChartColor"
                   >
            </canvas>             
        </div>
        <!-- ...ANOTHER CHART HERE... -->
    </div>

    <!-- THE INFORMATION BOX -->
    <div fxFlex="27" fxFlex.xs="27"  style="border: blue; border-style: double;">
        <app-information [crowsOnPerch]="crownsOnPerchValues" [coinsDeposited]="coinsDepositedValues"></app-information>
    </div>
   
</div>

I have set fxFlex.xs for the chart to be 60 and fxFlex.xs for the information box to be 27. I do not think this is being accurately reflected and cannot seem to figure out why. I would like the chart to fill the width of the screen and be much larger. How might I achieve this?

Note: The charts and wrapper do not have any positional styling (only fonts and borders).

Answer 1

If I'm not mistaken, you want the two boxes on different rows while using the xs screens.

Note: fxFlex="60" is a shorthand for fxFlex="1 1 60%".

I think it's better to remove the fxLayout.xs="column" and use fxLayout="row wrap" and add fxFlex.xs="100" or whatever for your chart div. Then after adding fxFlex.xs for the next box, if the sum of the sizes is more than 100, the next item would go to the next row.

<div fxLayout="row wrap" fxLayoutAlign="space-evenly center">
  <div fxFlex="60" fxFlex.xs="87" style="background: green">
    box1
  </div>
  <div fxFlex="27" fxFlex.xs="40" style="background: yellow;">
    box2
  </div>
</div>

Also, there are lots of useful information and examples about flex-layout in here and here.