当窗口变小时，Flex项目不会缩小 [英] Flex items not shrinking when 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）;}）; code>
.plot-div {max-width：100％;}。 plot-col {flex：0 0 50％;}。my-container {display：flex; flex-direction：row; flex-wrap：wrap;宽度：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 =plotdiv1class =plot-div>< / div> < / DIV> < div class =plot-col> < div id =plotdiv2class =plot-div>< / div> < / DIV> < / div>< / body>
JSFiddle：< a href =https://jsfiddle.net/bd0reepd/ =noreferrer> https://jsfiddle.net/bd0reepd/
我可能会误解flexbox的工作原理，但是如果我用图像替换图表，它们会按照预期收缩。
我试图调试这个，发现plotlys内部函数 plotAutoSize ，它调用 window.getComputedStyle 并相应地设置绘图大小。我已经使用 console.log 来查看 window.getComputedStyle 的返回值，它们在当窗口缩小时，最大的尺寸。
我怎样才能让图表缩小到合适的窗口，并保持在同一行中相邻？
b $ b在flex项目上的初始设置是 min-width：auto 。这意味着flex项目默认情况下不能小于它的内容。
你可以用 min-width：0 或溢出以及可见以外的任何值。添加到您的代码：
.plot-col {
min-width：0;
}
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);
});
.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 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:
.plot-col {
min-width: 0;
}
More info: Why doesn't flex item shrink past content size?
这篇关于当窗口变小时，Flex项目不会缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
