mat-tab-group超出父div宽度

问题描述

我已经搜索了这个问题，似乎是因为mat-tab-group也是使用flex布局创建的，由于某种原因，它干扰或忽略了父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>

外观。它不应超过青色背景。

解决方法

有时vh和vw的行为不符合预期。看到您的布局，很明显，由于某种原因，它并没有占用屏幕的整个宽度进行计算，这可能是使用这些单元的副作用之一。这是因为，例如vh等于初始包含块的高度的1％，并且此包含块并不总是相同。另外，在使用fxFlex时，我通常会看到人们不使用单位，而经常使用的数字是我认为默认的百分比，对我而言，该百分比更可靠，但我认为这归结为将哪个块作为初始按布局包含一个。