<分区>
我正在尝试将两个 plotly plots 放在一个 CSS flexbox 中并排放置。我希望它们在调整窗口大小时调整大小。当窗口变大时它按预期工作，但当窗口变小时绘图不会缩小。
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/
我可能误解了 flexbox 的工作原理，但如果我用图像替换绘图，它们会按预期缩小。
我尝试对此进行调试并找到 plotlys 内部函数 plotAutoSize，它调用 window.getComputedStyle 并相应地设置绘图大小。我使用 console.log 来查看 window.getComputedStyle 的返回值，当窗口缩小时，它们会“卡住”在最大尺寸处。
如何让绘图缩小以适合窗口并在同一行中彼此相邻？