Display:none mess up plot ly's graph

Here is code example

https://jsfiddle.net/2pc1h4v0/

When I have display:none, plot ly will act really weird, if I get rid of that, it will work.
Is there a way I can hide those graph first than display them? Not like display them all first then when click happen hide the rest?

By setting the height and width of the your divs in px, I think I got the results you’re looking for: https://jsfiddle.net/2pc1h4v0/3/

Can you confirm?

Yeah, but why is that? Also, I really want in % not px, is there a way? Because different pc has different resolutions so most of the time px will be a bad idea, right?

Is there any way to achieve this when setting the width to 100%? As @greggshao said this would be great for dynamic plot sizes. This would also allow you to use the bootstrap grid system on hidden divs.