Overlapping div in left side when turning off the collapse on the left sidebar [closed]

I built a dashboard that contains sidebar with collapse. When I try to put chartjs and make it display:grid, it turns out it is overlapping the right side when turning of the collapse.

Here is my html code:

<div style="grid-template-rows: auto;">
    <div class="line">
        <canvas id="myChart"></canvas>
    </div>
    <div class="line">
        <canvas id="myChart"></canvas>
    </div>
</div>
<div class="pie">   
    <canvas id="pieChart"></canvas>
</div>

css code:

    .line {
        margin-top: 3rem;
        background: #fff;
        width: 100%;
        height: 23.9vh;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

    
    .pie {
        margin-top: 3rem;
        background: #fff;
        width: 100%;
        height: 50vh;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

I have same code with my cards but I don't know why my charts becomes like this.

UPDATE: I put `position:fixed in my canvas of pie chart and it works but the pie chart gets smaller when turning off the collapse.