如何只滚动垫子标签的内容

Question

​

​

1)我有一个垫子工具栏(固定大小:最小宽度:64 mat)，

2)在垫子工具栏下面，我有一个Mat-Tab组，

3)有些tab内容很长，所以我只需要在选项卡内使用滚动条。

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

您的工具栏有最小高度:64 on！重要；因此，在您的标签上，请更改：

最小高度: 100%；最小高度: calc(100% -64 min)；

Answer 2

起作用了！

感谢@Liviu

工作连接

我已经取代了

mat-tab-group fxFill>

转到

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