Chart.js not responding to resize in grid column

I need my chart to resize to the full width and height of it's container within a grid column. I've read through the documentation and made sure maintainAspectRatio is false and the container position is set to relative. At best, I've managed to get it to resize only on screen enlargement (it resizes on screen minimize on page refresh) by wrapping the container in another div.

<div className="chart-container"> <div className="chart-wrapper"> <Pie data={{ labels: ['A', 'B', 'C'], datasets: [{ data: [a.length, b.length, c.length], backgroundColor: ['rgba(127, 255, 212, 0.7)', 'rgba(255, 215, 32, 0.7)', 'rgba(175, 175, 175, 0.5)'], borderColor: 'rgba(255, 255, 255, 0.2)', borderWidth: 1, offset: 20, hoverOffset: 40, }], }} options={{ plugins: { legend: { display: false }, datalabels: { color: 'rgba(255, 255, 255, 0.7)', font: { weight: 'bold', size: 18 }, formatter: (value: number) => value > 0 ? value : '', }, title: { display: true, text: "Pie" } }, maintainAspectRatio: false, }} /> </div> </div> .chart-container { width: 100%; height: 100%; padding: 1rem; } .pie-wrapper { position: relative; width: 100%; height: 100%; }