css - ¿Cómo agregar una barra de desplazamiento a un acordeón en PrimeNG?

Tengo un problema al expandir paneles dentro de mi acordeón en mi aplicación Angular. Básicamente, si expando un panel, este se expande y se superpone al pie de página de mi aplicación, así que estaba pensando en agregar una barra de desplazamiento al acordeón para que ya no se superponga al pie de página, pero no estoy seguro de por dónde empezar. ¿Alguien sabe cómo agregar una barra de desplazamiento al acordeón? Supongo que necesitaré poner el acordeón en un contenedor y luego agregar una barra de desplazamiento. Aquí está mi código y me gustaría agregar una barra de desplazamiento.

PLUNKER

<p-accordion [activeIndex]="index">
  <p-accordionTab header="Header 1">
   Content 1
</p-accordionTab>
<p-accordionTab *ngIf="true" header="Header 2">
   Content 2
</p-accordionTab>
<p-accordionTab header="Header 3">
  Content 3
</p-accordionTab>

Aquí hay dos imágenes sobre lo que sucede con mi pie de página cuando se expande un panel:

1) ANTES de Expandir el Panel

2) DESPUÉS de expandir el panel

Respuesta #1

Simplemente agrega estas propiedades CSS al elemento p-accordion:

height: 275px;
display: block;
overflow: scroll;

Plunker