window 变小时弹性项目不会收缩
Flex items not shrinking when window gets smaller
我试图在 CSS flexbox 中将两个 plotly plots 放在一起。我希望它们在 window 调整大小时调整大小。当 window 增长时,它按预期工作,但当 window 变小时,地块不会缩小。
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
的 return 值,当 window 缩小时,它们的最大尺寸为 "stuck"。
如何让绘图缩小以适应 window 并在同一行中彼此相邻?
弹性项目的初始设置是 min-width: auto
。这意味着弹性项目默认情况下不能小于其内容。
您可以使用 min-width: 0
或 overflow
以及 visible
以外的任何值覆盖此设置。将此添加到您的代码中:
.plot-col {
min-width: 0;
}
更多信息:
我试图在 CSS flexbox 中将两个 plotly plots 放在一起。我希望它们在 window 调整大小时调整大小。当 window 增长时,它按预期工作,但当 window 变小时,地块不会缩小。
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
的 return 值,当 window 缩小时,它们的最大尺寸为 "stuck"。
如何让绘图缩小以适应 window 并在同一行中彼此相邻?
弹性项目的初始设置是 min-width: auto
。这意味着弹性项目默认情况下不能小于其内容。
您可以使用 min-width: 0
或 overflow
以及 visible
以外的任何值覆盖此设置。将此添加到您的代码中:
.plot-col {
min-width: 0;
}
更多信息: