Chart created with chart JS scrolls and does not fit into the screen

I am new to chartJS and was including a bar chart in one of the angular project, Requirement: The container holding chart should completely fit into the screen immediately below the header and should not scroll, I don't want to hard code any pixels by setting width and height to the canvas tag as I will be making it responsive in future to smaller devices as well.

Approach :So I gave a height to the container div of 600px(I will set diff heights with @media quires for smaller devices in future) and the chart fits perfectly, but there is a scroll bar appearing with a light scroll happening , how do I fit it to the container without any scroll?

Can somebody help me out as to why is my card which holds the chart scrolls?

Solution tried: I've made maintianaspect ratio : false, and responsiveness true: still the container holding the chart scrolls

Attaching a screenshot with the scroll barThe highlighted area is the scroll bar and the the card which holds the chart is also scrolling slightly

Thanks to any solutions in advance

I'm also pasting my ts ,scss , html code here

html

<div class="container">
    <div class="topbar">
        <div class="logo">
            
        </div>
        <div class="search">
            <input type="text" id="search" placeholder="seacrh here">
            <label for="serach"><i class="fas fa-search"></i></label>
        </div>
        <i class="fas fa-bell"></i>
        <div class="user">
            <img src="" alt="no Image available">
        </div>
    </div>
   
   
    <div class="main">
       
        <div class="charts">
            <div class="chart">
              
            <div style="position: relative;height:600px">
            <canvas  class="canvasHeight" baseChart [datasets]="barChartData"
                         [labels]="barChartLabels" [options]="barChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend"
            [type]="barChartType">
            </canvas>
           </div>
            </div>
           

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

scss

.user{
    position: relative;
    width:50px;
    height:50px;
    border:2px solid blue;
}

.user img{
    position: absolute;
    top:0px;
    left:0px;
    width:100%; //fits the parent area only since position is absolute
    height:100%;
    object-fit: cover;
}

.topbar{
 position: fixed;
 background: #fff;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
 width:100%;
 height:60px; // use this for top bar calculations
 padding:0 20px;
 display: grid;
 grid-template-columns: 2fr 10fr 0.4fr 1fr;
 align-items: center;
 z-index: 1;
}


   
.logo h2{
    color: #299B63;
}

.search{
    position: relative;
    width: 60%;
    justify-self: center;
}

.search input{
    width:100%;
    height:40px;
    padding: 0 40px;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 10px;
    background: #f5f5f5;
}

.search i{
    position: absolute;
    right:15px;
    top:15px;
    cursor: pointer;  
}


 //main section
 .main{
     border:2px solid blue;
     position: absolute;
     top:60px;
     width:100%;
     min-height: calc(100vh - 60px);// subtract the header width
     background: #f5f5f5;
 }

 .cards{
     width:100%;
     padding:35px 20px;
     display: grid;
     width:100%;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 20px;
 }

 .cards .card{
     padding: 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 7px 25px 0 rgbs(0,0,0,0.08);
 }

 .number{
     font-size: 35px;
     font-weight: 500;
     color: #299B63;
 }

 .card-name{
     color: #888;
     font-weight: 600;
 }

 .icon-box i{
     font-size: 600;
     color: #299B63;
 }

 //charts css

 .charts{
     display: grid;
     border: 2px solid blue;
     grid-template-columns: 1fr;
     grid-gap: 20px;
     width: 100%;
     padding: 20px;
     padding-top: 23px;
 }

 .chart{
     background: #fff;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 7px 25px rgba(0,0,0,0.8);
     width: 100%;
     border: 2px solid green;
          
 }


ts

```import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataset } from 'chart.js';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss']
})
export class BarChartComponent  {
constructor() { }

ngOnInit(): void {
}

public barChartOptions: ChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
  
};
public barChartLabels = ['2006', '2007', '2008', '2009', '2010', 
'2011', '2012'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];

public barChartData: ChartDataset[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
];


}```