當窗口變小時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的返回值，當窗口縮小時，它們會以最大尺寸「卡住」。

我怎樣才能讓地塊縮小到合適的窗口，並保持在同一行中彼此相鄰？

來源

2016-07-14 Alexander Schlüter