Responsive Resize simple fix not in documentation

[DavidAshburn]

Documentation Is:

• [X] Missing or needed?
• [ ] Confusing
• [ ] Not sure?

Please Explain in Detail...

https://github.com/chartjs/Chart.js/issues/4156 this issue could be cleared with a documentation update.

Responsive charts belong in their own relative position div to control their sizing which is fine. When that div is inside a grid or flexbox, there are some overflow issues when resizing the window to smaller sizes due to intrinsic sizing in grid and flex containers.

The fix is really simple, the relative div needs a 'min-width: 0' in order for these containers to shrink the content correctly. Otherwise it overflows its parent container.

Everything works great after that addition but it takes a bit of googling to find the fix for this issue. Adding to the docs would be easy and convenient.

Your Proposal for Changes

Responsive Charts -If your chart is inside a grid or flexbox, give the containing div used for sizing a min-width: 0. This allows the chart to shrink and grow with the intrinsic flexbox or grid sizing.

Example

No response

[etimberg]

Happy to review a pr updating the docs to be more extensive here

[Thanush19]

Can I fix this??

[DavidAshburn]

https://github.com/chartjs/Chart.js/pull/11509

On Mon, Sep 25, 2023 at 6:22 AM Thanush19 @.***> wrote:

Can I fix this??

— Reply to this email directly, view it on GitHub https://github.com/chartjs/Chart.js/issues/11489#issuecomment-1734079753, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZUY4TV75WRVWMDJQO2PSS3X4GVULANCNFSM6AAAAAA4N6VTVY . You are receiving this because you authored the thread.Message ID: @.***>