mat-tab-group exceeds parent div width

Question

I've a searched about this problem, and seems it's because mat-tab-group was created also with flex layouts, and for some reason, it's interfering or ignoring the widths of the parent div.

<div fxLayout="row" fxFlex="50vh" style="background-color: cyan;" *ngIf="selectedService$ | async as selectedService"> 
    <!-- SPECIFIC PANEL -->
    <div fxLayout="column" fxFlex="15vw" style="background-color: blueviolet;">  
      <!-- STUB -->
    </div>
    <div fxLayout="column" fxFlex="85vw">
      <mat-tab-group>          
        <mat-tab label="Records">
          <ng-template matTabContent>
            <app-voice-records>
              <!-- COOL GRAPH GOES HERE -->
            </app-voice-records>
          </ng-template>
        </mat-tab>
      </mat-tab-group> 
    </div>
  </div>

How it looks. It shouldn't surpass the cyan background.

Answer 1

Sometimes vh and vw don't behave as expected. Seeing your layout it was evident that for some reason it wasn't taking the full width of the screen for it's calculations and this could be one of the side effects of using those units. This is because vh for example is equal to 1% of the height of the initial containing block and this containing block is not always the same. Also when fxFlex is being used I usually see people not using the units and often just using the number that I think that defaults to percentages which are, to me, more reliable but I think it all boils down to which block is taken as the initial containing one by the layout.