I'm trying to fit two plotly plots next to each other inside a CSS flexbox. I want them to resize when the window is resized. It works as expected when the window grows, but the plots don't shrink when the window gets smaller.
var trace1 = {};
var trace2 = {};
var plotdiv1 = document.getElementById("plotdiv1");
var plotdiv2 = document.getElementById("plotdiv2");
Plotly.newPlot(plotdiv1, [trace1]);
Plotly.newPlot(plotdiv2, [trace2]);
window.addEventListener("resize", function() {
Plotly.Plots.resize(plotdiv1);
Plotly.Plots.resize(plotdiv2);
});
I am probably misunderstanding how flexbox works, but if I replace the plots with images, they shrink as expected.
I have tried to debug this and found plotlys internal function plotAutoSize, which calls window.getComputedStyle and sets the plot size accordingly. I have used console.log to look at the return values of window.getComputedStyle and they get "stuck" at the largest size when the window shrinks.
How can I get the plots to shrink to fit the window and stay next to each other in the same row?
解决方案
An initial setting on flex items is min-width: auto. This means that a flex item cannot, by default, be smaller than its content.
You can override this setting with min-width: 0 or overflow with any value other than visible. Add this to your code:
