javascript – 当窗口变小时,Flex项目不会缩小[重复]

参见英文答案 > Why don’t flex items shrink past content size?                                    1个答案                                我正试图在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/

我可能误解了flexbox的工作原理,但是如果我用图像替换这些图,它们会按预期收缩。

我试图调试它并找到plotlys内部函数plotAutoSize,它调用window.getComputedStyle并相应地设置绘图大小。我已经使用console.log来查看window.getComputedStyle的返回值,当窗口缩小时,它们会以最大的大小“卡住”。

如何让图形缩小以适应窗口并在同一行中保持彼此相邻?

最佳答案
弹性项目的初始设置是min-width:auto。这意味着默认情况下,弹性项目不能小于其内容。

您可以使用min-width:0覆盖此设置,或使用除visible之外的任何值溢出。将其添加到您的代码中:

.plot-col {
    min-width: 0;
}

Revised Fiddle

更多信息:Why doesn’t flex item shrink past content size?

转载注明原文:javascript – 当窗口变小时,Flex项目不会缩小[重复] - 代码日志