在溢出时隐藏额外的按钮

Question

在这里，我显示的是应用于结果的过滤器，所选的将处于活动状态，其余的将不会处于活动状态。但是，如果结果超过那一行，我需要为其他按钮创建一个隐藏/显示按钮，该按钮是动态的，并取决于过滤器的数量。

例如：

<button>Filter 1</button><button>Filter 2</button><button>Filter 3</button><button (click)="showAll()">+2 more</button>

当我再单击+2时，它应该显示其余两个。如果只有3个，则不会再有+2个。

在这种情况下，如何使用overflow:hidden？

<div class="row">
    <div class="col-md-12 button-row">
        <button mat-raised-button color="primary"selected>{{selectedFilter.name}}</button>
        <button mat-stroked-button color="primary"selected *ngFor="let subject of selectedFilter.listOfFilters" [ngClass]="{'active':subject===selectedFilter.selected}">{{subject}}</button> 
    </div>
</div>