My goal is to arrange two plotly plots side by side within a CSS flexbox, with the ability to resize them as the window size changes. The issue I'm facing is that while the plots expand correctly when the window is enlarged, they fail to shrink when the window is made 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);
});.plot-div {
max-width: 100%;
}
.plot-col {
flex: 0 0 50%;
}
.my-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div class="my-container">
<div class="plot-col">
<div id="plotdiv1" class="plot-div"></div>
</div>
<div class="plot-col">
<div id="plotdiv2" class="plot-div"></div>
</div>
</div>
</body>JSFiddle: https://jsfiddle.net/bd0reepd/
I suspect there might be a misunderstanding in my use of flexbox, as replacing the plots with images allows them to shrink properly.
When investigating the issue, I came across plotly's internal function plotAutoSize, which utilizes window.getComputedStyle to adjust the plot size accordingly. By using console.log for debug purposes, I noticed that the values returned by window.getComputedStyle remain fixed at the maximum size even when the window is resized to be smaller.
How can I ensure that the plots resize appropriately to fit the window and remain next to each other in the same row?