Chart is not responsive inside flexbox

[jasonpolites]

Expected behavior

Chart should be responsive when contained in a div with the prescribed criteria.

Current behavior

I have a layout in my app which uses flex-box to determine the layout of UI elements. The reproducible sample presents a simplified version of this layout. On its own, it may not make sense, but it's a subset of the overall layout that still presents the issue.

The chart does not resize when the size of the containing DIV is changed (e.g through changing the browser window size). To be more precise, it does resize UP (increase), but not DOWN (decrease). If you load the code pen with a smaller window, then drag to increase, you will see the chart expand, but it won't contract when you reduce the window size.

https://codepen.io/jasonpolites/pen/QWXwENB

Reproducible sample

https://codepen.io/jasonpolites/pen/QWXwENB

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.4.3

Browser name and version

No response

Link to your project

No response

[bence444]

Adding max-width: min-content; to the canvas seems to fix the issue (tested in Firefox and Chrome)

[haeythamM]

I believe this one will work :

use this :
canvas {
border: 1px dotted red;
width: 100% !important;
height: 100% !important;
}
also
.chart-container {
position: relative;
margin: auto;
width: 100% !important;
height: 100% !important;
}
remove this " height: 300px;"