我一直在解决这个问题，我有100个选定的用户，即使我有一个滚动条，我也看不到他们。这是一个用户网格，它是动态的，取决于用户，所以当我在列表中选择更多的用户时，它会转到我的屏幕下面，大多数下面的记录是不可见的，即使滚动条在那里，但滚动条不能滚动到网格的末端。 （请参阅附件GIF）。请参阅此GIF

<ul id="filter-users" role="tablist" class="filter-list" *ngIf="getFilterUsers.length > 0" [@fadeAnimation]>
  <li class="panel" id="qa-user{{filter.NameFilter}}" *ngFor="let filter of getFilterUsers; let ind = index"
    [@fadeAnimation]>
    <div class="filter-list__cont-menu-item-name" [ngClass]="{'active': filter.NameFilter === selectedTitleUser}"
      data-parent="#filter-users" data-toggle="collapse" role="tab" [attr.data-target]="'#filter-users' + ind"
      aria-expanded="false" (click)="onTitleUser(filter.NameFilter)">
      <div class="cont-icon">
        <span class="closeicon">&#x0229E;</span>
        <span class="openicon">&#x0229F;</span>
      </div>
      <span class="main-name" [ngClass]="{'color-txt': this.chageColorUser.length ? findNameSod(filter.NameFilter) : false}">{{filter.NameFilter}}</span>
      <div id="qa-userremoveuser" class="remove-user-btn" (click)="onRemoveUser(filter.Id);"><span class="k-icon k-i-close"></span></div>
    </div>
    <div class="collapse filter-list__cont-sub-menu" role="tabpanel" id="filter-users{{ind}}" aria-expanded="false">
      <ul>
        <li class="subfilter-name"  
          data-toggle="tooltip" data-placement="right" 
          *ngFor="let subFilter of filter.SubFilters" 
          title="{{subFilter.Name}}" 
          id="qa-user{{subFilter.Name}}" 
          [@fadeAnimation]>
          {{subFilter.Name}}
      </li>
    </ul>
    </div>
  </li>
</ul>

此处为CSS

.filter-list {
    clear: both;
    margin: 0;
    padding: 0px 0 !important;
    list-style: none;
    font-size: 12px;
    font-family: "Roboto";
    font-weight: 400;
    background-color: $white;
    // padding: 15px 0;
    max-height: 1000px;
    overflow-y: auto;
    height: 100%;

    li {
        position: relative;
    }

    .panel {
        margin-bottom: 0;
        border: 0;
        box-shadow: none;

        &.hideFilter {
            display: none;
        }
    }

    &__cont-menu-item-name {
        background-color: white;
        // padding: 3px;
        color : #333333;
        cursor: pointer;
        position: relative;
        padding: 7px 0;
        border-bottom: 1px solid #eeeeee;

        .glyphicon {
            color: $gray6;
            transform: rotate(0);
            transition: transform 0.3s;
        }

        .cont-icon {
            display: inline-block;
            position: relative;
            font-size: 11px;
            top: -1.5px;
            margin-left: 13px;
            margin-right: 5px;

            .openicon {
                display: none;
            }

            .closeicon {
                display: block;
            }
        }

        .main-name {
            // color: $white;
            // font-family: 'Roboto', sans-serif;
        }
        .color-txt {
            color: $red1;
        }

        .remove-user-btn {
            position: absolute;
            right: 10px;
            top: -2px;
            font-size: 16px;
            // color: $white;
        }

        &:hover {
            background-color: $blue1;
            color: $white;

            .glyphicon {
                color: $white;
            }
        }

        &.active {
            background-color: $blue1 !important;
            color: $white !important;

            .cont-icon {
                .openicon {
                    display: block !important;
                }

                .closeicon {
                    display: none !important;
                }
            }
        }
    }

    &__cont-sub-menu {
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 12px;
            font-family: 'Roboto', sans-serif;
            background-color: white;
            color: #333333;
            max-height: auto;
            overflow-y: auto;

            li {
                // padding: 0 10px 0 35px;
                cursor: default;
                border-bottom: 1px solid #eeeeee;
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 28px;
                padding-right: 12px;
                /* &:hover {
                    background-color: $blue2;
                } */

                &:first-child {
                     padding-top: 6px;
                }

                &:last-child {
                    padding-bottom: 6px;
                }
            }

            li .panel {
                box-shadow: none;
            }

        }
    }
}