Chart.js canvas keeps shifting upwards if I add things below it? (Angular - Chart.JS - NG2Charts)

I have a chart.js bar chart inside a container. This container is made scrollable. Everything works just fine and as expected when there is nothing else in this container but the bar chart. However, as soon as I begin adding additional divs / content etc..., the table will move upwards and out of the containing div. I honestly am not sure as to why this is happening, and why the additional content being added is not simply being pushed down instead?

Below is my HTML, where the table canvas is contained - Please note, apart from Chart.JS, I am also making use of NG2 Charts (although this shouldn't change much):

<div class="report-container">
      <!--Report Bar Chart-->
      <div class="chart-wrapper">
        <h1>Product Performance Chart</h1>
          <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [plugins]="barChartPlugins"
            [legend]="barChartLegend"
            [colors]="barChartColors"
            [chartType]="barChartType">
          </canvas>
        <div>
        <div class="spacer-div">

        </div>
      </div>
</div>

The styling (using SCSS) for the above components are as follows:

.report-container {
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;

    .chart-wrapper {
      display: block;
      flex-direction: column;
      align-items: center;

      h1 {
        color: $undef-primary;
        font-weight: 600;
        font-family: $font-primary;
        margin-top: 17%;
      }
    }
    @include set-page-content;
}

.spacer-div {
  width: 40vw;
  height: 10vh;
  background-color: aqua;
}

the mixin, "set-page-content" is:

@mixin set-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  width: 60vw;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  border-radius: $form-radius;
}

I also decided to include images to show visually what is happening: The image below is how the container is shown while the spacer div has a height of: 10vh

The image below is how the container is shown while the spacer div has a height of: 100vh

As can be seen above in the second image. All of the spacer div is shown, however the chart is pushed up, and significantly cut off.

My Chart.JS options are as follows:

public barChartOptions: ChartOptions = {
    responsive:true,
    maintainAspectRatio: true,

    // We use these empty structures as placeholders for dynamic theming.
    scales: { xAxes: [{}], yAxes: [{}] },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'end',
      }
    }
  };

I have played around with the responsive and maintainAspectRatio attributes by changing them to be true or false, however non of this makes any dramatic or solvable difference.

Any help is truly appreciated.