Chart.js 关闭左侧栏上的折叠时，左侧出现重叠div

我构建了一个包含带有折叠的侧栏的仪表板。当我尝试放置chartjs并使其显示：grid时，结果发现它在翻转折叠时与右侧重叠

以下是我的html代码：

<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>

我的卡片上有相同的代码，但我不知道为什么我的图表会变成这样。我也尝试了不同的浏览器和1080p，但没有任何变化

    .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);
    }