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

Posted 2023-02-18

技术标签:

【中文标题】当窗口变小时，Flex项目不会缩小[重复]【英文标题】：Flex items not shrinking when window gets smaller [duplicate] 【发布时间】：2016-11-17 20:59:11 【问题描述】：

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

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 的返回值，当窗口缩小时，它们会“卡在”最大尺寸。

如何让绘图缩小以适应窗口并在同一行中彼此相邻？

【问题讨论】：

【参考方案1】：

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

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