How to fit mermaid diagram to fit into the parent container ngx-panzoom

Question

We have a mermaid diagram data and we're rendering mermaid content using mermaid library in Angular. I have wrapped mermaid content within panzoom to exploit zoom-in and zoom-out functionality, the problem here is mermaid diagram is unable to fit to parent container, I want to keep it fit within the parent container.

mermaid-diagram.component.html

<pan-zoom [config]="panZoomConfig">

        <div style="position: relative;">

          <div #mermaidContainer class="mermaid">
          graph TD
            A-->B
            A-->C
            B-->D
            C-->D
        </div>

        </div>

      </pan-zoom>

mermaid-diagram.component.ts

panZoomConfig: PanZoomConfig = new PanZoomConfig({
    zoomLevels: 5,
    scalePerZoomLevel: 1.5,
    zoomStepDuration: 0.2,
    freeMouseWheel: true,
    freeMouseWheelFactor: 0.01,
    initialZoomLevel: 1
  });

style.css

.diagram-container {
      width: 100%;
      height: 500px;
      overflow: hidden;
      position: relative;
    }
    .mermaid {
      width: 100%;
      height: 100%;
    }