multiple charts in Flexbox not the same size

[robske110]

Expected Behavior

Multiple charts should be the same size in a flex with the same grow and shrink parameters.

Current Behavior

Charts are different size

Possible Solution

unknown

Steps to Reproduce

Multiple charts in a Flexbox row with equal grow and shrink
https://jsfiddle.net/rmp67bd4/1/

Context

I am trying to use Flexbox to quickly layout many doughnut charts in a grid pattern.

Environment

• Chart.js version: 2.9.4
• Browser name and version: Safari Version 14.0.3 and Firefox 86.0b8
• Link to your project: https://jsfiddle.net/rmp67bd4/1/

[kurkle]

Adding flex-basis: 30% helps quite a lot (for 3 charts):
https://jsfiddle.net/x9byLr82/1/ (v3, but it seems to work the same)

[ba55ie]

Or use css grid:

• https://jsfiddle.net/3ny4xk6d/
• https://caniuse.com/css-grid

I don't think this is bug (related to Chart.js).

[LeeLenaleee]

Its not a chartjs issue, if you resize the area fast it makes some canvases bigger, verry inconsistent. But every time the chart is rendered to the max the canvas is allowed

[robske110]

Yes, I think this is simply undefined behaviour from the browsers side, since every chart can technically "fit itself" into any space. If there is nothing that can be done from the chartjs side to mitigate this, I think simply specifying the width (be it with css grid, flex-bases or good old width: 33%) is probably fine.