ChartJS and Flexbox not so responsive

[Zulfia73]

I have made a grid system using flex and now I insert some charts. And I try to use simple(display: flex).

Expected Behavior

When I increase the width of the screen, myChart must increase too and conversely, when i minimize .

Current Behavior

When I increase worked correct, but when minimize, myChart didn't minimized too

Possible Solution

I think. problem, that I use FlexBox, but answer i can't find.

[EmilMoe]

Flexbox is so poorly supported in IE that I would actually recommend you to avoid it.

Besides that I have had major issues with responsive and flexbox (in Firefox and Chrome).

[etimberg]

I think this should work if you put a div inside the flexbox container and put the canvas inside that.

@simonbrunel thoughts?

[simonbrunel]

@Zulfia73 @EmilMoe can you share a fiddle that showcase this issue?

[EmilMoe]

@simonbrunel I do not have any examples. Just added my experience that I had issues as well. I completely removed flexbox as it gives too many issues in IE and Edge.

As far as I remember the problem is that I need manually to redraw the graphs on resize when they are in flexbox.

[simonbrunel]

It makes me think about the flex box and truncated text issue (specs): you should try to set min-width: 0 on the div (grid cells) containing charts (examples w/o min-width and w/ min-width).

[EmilMoe]

@simonbrunel it might work, I read about that as well, but unfortunately the support in IE and Edge is so poor that I decided to avoid flexbox.

[etimberg]

Closing as out of date / answered per the conversation above

[starpit]

documenting this for future reference:

i am seeing this on chrome 59 (electron 1.7.9). when the chart is inside of a flex container, the initial size is fine. and the responsive bits respond well to increases in the size of the container. but the chart does not respond to decreases in container size. i note this also by attaching an onResize handler to the chart. i get callbacks for increases, but not for decreases.

https://jsfiddle.net/pgg9pz7c/1/

try growing the width of the window. observe that both charts respond well, growing in size; now try shrinking the width of the window. observe that only the lower chart responds well. the upper one, contained in a flexbox, does not respond to the shrinkage.

i also observe this behavior in firefox 57, in addition to the chrome embedded in electron 1.7.9

for future reference, the above suggestion of min-width: 0 seems to resolve this issue. not on the immediate container of the chart, but on the flex parent.

[simonbrunel]

@starpit see my comment above (jsfiddle with min-width)

[starpit]

thanks @simonbrunel

yes, the fix requires a min-width attr in the case of nested flex boxes. thanks!

[gtalarico]

Just wanted to say thanks to @simonbrunel as well
i have been trying to find a fix for this for a while... Thank you!

[mholt]

Can confirm min-width: 0 on the container of the chart does the trick. Thanks @simonbrunel!

[mocon]

Nice @simonbrunel, thank you!

[ghost]

It makes me think about the flex box and truncated text issue (specs): you should try to set min-width: 0 on the div (grid cells) containing charts (examples w/o min-width and w/ min-width).

thanks for this!

[masaok]

It makes me think about the flex box and truncated text issue (specs): you should try to set min-width: 0 on the div (grid cells) containing charts (examples w/o min-width and w/ min-width).

Thank you as well! Although, this solution did not specifically work for me, I found that overflow: auto did work, and it even works in your jsfiddle example (although it shows a flickering scrollbar in jsfiddle, so not it's probably not an optimal solution, but in my project, this solution works just fine).