当窗口变小时，Flex 项目不会缩小

2022-01-21 00:00:00 plotly javascript css flexbox

我正在尝试在 CSS flexbox 中放置两个相邻的绘图.我希望它们在调整窗口大小时调整大小.当窗口变大时，它按预期工作，但当窗口变小时，绘图不会缩小.

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/

我可能误解了 flexbox 的工作原理，但是如果我用图像替换绘图，它们会按预期缩小.

I am probably misunderstanding how flexbox works, but if I replace the plots with images, they shrink as expected.

我试图调试这个并找到了plotlys内部函数plotAutoSize，它调用window.getComputedStyle并相应地设置绘图大小.我使用 console.log 来查看 window.getComputedStyle 的返回值，当窗口缩小时，它们会卡在"最大尺寸.

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?

推荐答案

弹性项目的初始设置是 min-width: auto.这意味着默认情况下，弹性项目不能小于其内容.

An initial setting on flex items is min-width: auto. This means that a flex item cannot, by default, be smaller than its content.

您可以使用 min-width: 0 或 overflow 使用除 visible 以外的任何值覆盖此设置.将此添加到您的代码中:

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;
}

修订小提琴

更多信息:为什么弹性项目不缩小超过内容大小?

相关文章