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

问题描述：

我试图在CSS flexbox内部放置两个彼此相邻的情节。我希望他们在调整窗口大小时调整大小。它在窗口增长时按预期工作，但当窗口变小时，绘图不缩小。当窗口变小时Flex项目不缩小

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。这意味着默认情况下，Flex项目不能小于其内容。

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

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

Revised Fiddle

...从而端部45a分钟的搏杀我的头放在我的桌子的。非常感谢！ –

这是一个艰难的;感谢您的帮助 –

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

相关推荐