我正在尝试在 CSS 弹性盒内放置两个相邻的绘图。我希望它们在调整窗口大小时也调整大小。当窗口增大时，它会按预期工作，但当窗口变小时，绘图不会缩小。
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/ https://jsfiddle.net/bd0reepd/
我可能误解了 Flexbox 的工作原理，但如果我用图像替换绘图，它们会按预期缩小。
我尝试调试这个并发现了plotlys内部函数plotAutoSize，这称为window.getComputedStyle并相应地设置绘图大小。我用过console.log查看返回值window.getComputedStyle当窗口缩小时，它们会“卡在”最大尺寸。
如何使绘图缩小以适合窗口并保持在同一行中？
弹性项目的初始设置是min-width: auto。这意味着默认情况下，弹性项目不能小于其内容。
您可以使用以下命令覆盖此设置min-width: 0 or overflow具有除visible。将其添加到您的代码中：
.plot-col {
min-width: 0;
}
修改后的小提琴 https://jsfiddle.net/bd0reepd/1/
更多信息：为什么弹性项目不会缩小到超过内容大小？ https://stackoverflow.com/q/36247140/3597276
这里解释一下这个设置的原因：w3.org/TR/css-flexbox-1/#min-size-auto https://www.w3.org/TR/css-flexbox-1/#min-size-auto).
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
