mat-tab-group 超出父 div 宽度

Question

我搜索过这个问题，似乎是因为 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>

它看起来怎么样。它不应该超过青色背景。

Answer 1

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

mat-tab-group 超出父 div 宽度

mat-tab-group exceeds parent div width

html

css

angular

flexbox

angular-flex-layout