PrimeNg (7.x) / P-TREE / Filter / Double scroll bar

Question

When I add the filter property on a PrimeNg (7.x) p-tree it works as expected but I have a double scroll bar.

The implementation is not special

            <div class="row" *ngIf="formControls.wantThemes.value">
                <div class="col-4 app-notif-edit-label"></div>
                <div class="col-4 app-notif-edit-content">
                    <h4>Themes</h4>
                    <p-tree
                        [filter]="true"
                        class="app-notif-p-tree"
                        [value]="cmtyThemesTreeNodes"
                        [(selection)]="selectedCmtyThemesTreeNodes"
                        selectionMode="checkbox"
                        (onNodeSelect)="nodeSelectThemes($event)"
                        (onNodeUnselect)="nodeSelectThemes($event)"
                    >
                    </p-tree>
                </div>
            </div>

I have applied the following css to limit the size of the box

.app-notif-p-tree .ui-tree {
color: $sinapseBlue;
display: block;
font-size: medium;
height: 100%;
margin: 2% auto;
max-height: 250px;
min-height: 250px;
overflow: auto;
white-space: nowrap;
width: 97%; }

If I change the overflow to hidden, I don't see the last element of my list.

Any idea why? Thanks

Answer 1

I have added .app-notif-p-tree .ui-tree .ui-tree-container { height: 80%; }