Как изменить размер таблицы, когда строки уменьшаются?

Question

У меня есть таблица под строкой поиска. Когда я что-то пишу внутри, оно фильтрует это слово с помощью моего списка навыков, и таблица появляется внизу строки.

Все работает хорошо, но не размером с этот div, потому что он имеет высоту 300px, поэтому, если у меня есть 10 навыков, это нормально, но если навык, например, 2, каждый тд будет иметь высоту 150px.

Поэтому я хотел бы исправить это с максимальной высотой 300px, и когда строки уменьшатся, я хочу, чтобы таблица стала меньше.

HTML

<div class="container">
    <ng-container
            *ngIf="searchString.searchString && (searchSkills.getAllSkill() | filterAll : searchString.searchString) as filteredSkills">
        <ng-container *ngIf="filteredSkills.length > 0">
            <div class="suggerite">
                <cdk-virtual-scroll-viewport [itemSize]="10" class="sugtab style-bar modal-bar">
                    <table class="sugtab">
                        <tbody>
                        <tr *cdkVirtualFor="let skill of filteredSkills" class="sugtag">
                            <td (click)="addToSearch(skill)" class="skill">
                                {{skill.name}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </cdk-virtual-scroll-viewport>
            </div>
        </ng-container>
    </ng-container>
</div>

CSS

.suggerite{
    position: relative;
    border: 1px solid #064a94;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.9);
    color: #064a94;
    z-index: 100;
    cursor: pointer;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sugtab{
    height: 200px;
    width: 100%;
    font-family: sans-serif;
}

tr.sugtab {
    height: 50px;
}

td.skill{
    padding: 3px;
}

Я пытался использовать максимальную высоту и разные вещи, но, вероятно, в неправильных местах.