如何僅滾動mat-tab的內容

Question

1）我有一個墊子工具欄（固定大小：最小寬度：64像素），

2）在mat-toolbar下方，我有一個Mat-Tab組，

3）一些選項卡的內容很長，因此我只需要在選項卡內使用滾動條即可。

4）但是，可滾動內容的最后幾行被剪切並且不可見。

StackBlitz示例

<div fxFill style="overflow:hidden !important">

<mat-toolbar color="primary" style="min-height:64px !important">
    <button mat-icon-button>
  <mat-icon>Toolbar</mat-icon>
</button>
</mat-toolbar>

<mat-tab-group fxFill>

<!-- need this tab content to fill -->
    <mat-tab label="Short-1">
        <div fxFill fxLayout="column" style="background-color:lightblue;">
            <p>Short Content 1</p>
        </div>
    </mat-tab>

<!-- need this to scroll but last few lines are clipped-->
    <mat-tab label="Long">
        <div fxFill fxLayout="column" style="overflow:auto;background-color:yellow;">
    <div >
              <p *ngFor="let line of lines">{{line}}</p>
    </div>
        </div>
    </mat-tab>

<!-- need this tab content to fill -->
<mat-tab label="Short-2">
        <div fxFill fxLayout="column" style="background-color:lightgreen;">
            <p>Short Content 2</p>
        </div>
    </mat-tab>


</mat-tab-group>

Answer 1

您的工具欄的最小高度為：64px！important ;，因此，請在您的標簽上更改：

最低高度：100％； 最小高度：calc（100％-64px）;

Answer 2

工作正常！！

感謝@Liviu Nita

工作連結

我已經更換了

mat-tab-group fxFill>

成

<mat-tab-group style="height: calc(100% - 64px); min-height: calc(100% - 64px); min-width: 100%; width: 100%; margin: 0px;">