css - 当应用滚动时，primeng 中的子菜单被切断 primeng angular

Question

当我将滚动条应用到主菜单时，我遇到了子菜单被切断的问题，但我无法让子菜单显示在滚动条上方。

下面是一个简单的代码:https://stackblitz.com/edit/angular-cyvv7d

任何帮助都会很棒。

供引用，HTML:

 <div class="scroll-width-perso">
    <p-tieredMenu [model]="items"></p-tieredMenu>
  </div>

CSS 文件:

.app-scroll-perso {
  max-height: 30vh;
  overflow-y: auto;
  overflow-x: hidden;
  width: 250px;
}

和 TypeScript 文件:

import {MenuItem} from 'primeng/api';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'test menu with scroll';


   items: MenuItem[];

   ngOnInit() {
        this.items = [
            {
                label: 'File',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'},
                    {label: 'save', icon: 'pi pi-fw pi-refresh'},
                    {label: 'modify', icon: 'pi pi-fw pi-refresh'},
                    {label: 'nothing', icon: 'pi pi-fw pi-refresh'}
                ]
            },
            {
                label: 'encouragment',
                icon: 'pi pi-briefcase'
            },
            {
                label: 'primeng',
                icon: 'pi pi-save'
            },
            {
                label: 'contact',
                icon: 'pi pi-cloud-upload'
            },
            {
                label: 'Edit',
                icon: 'pi pi-tags'
            },
            {
                label: 'user',
                icon: 'pi pi-user',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'},
                    {label: 'save', icon: 'pi pi-fw pi-refresh'},
                    {label: 'modify', icon: 'pi pi-fw pi-refresh'},
                    {label: 'nothing', icon: 'pi pi-fw pi-refresh'}
                ]
            },
            {
                label: 'blog',
                icon: 'pi pi-fw pi-pencil'
            }
        ];
    }
}

Answer 1

试试这个:

.app-scroll-perso {
 max-height: 30vh;
 overflow-y: auto;
 overflow-x: hidden;
 width: 400px;
}