खिड़की छोटे होने पर फ्लेक्स आइटम कम नहीं हो रहे हैं

मैं एक सीएसएस 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 काम करता है, लेकिन अगर मैं छवियों के साथ भूखंडों की जगह, वे हटना अपेक्षा के अनुरूप।

मैंने इसे डीबग करने का प्रयास किया है और साजिश आंतरिक कार्य plotAutoSize पाया है, जो window.getComputedStyle पर कॉल करता है और इसके अनुसार साजिश का आकार निर्धारित करता है। मैंने के वापसी मूल्यों को देखने के लिए console.log का उपयोग किया है और जब खिड़की कम हो जाती है तो वे सबसे बड़े आकार में "अटक जाते हैं"।

मैं खिड़की के फिट होने के लिए सड़कों को कम करने और एक ही पंक्ति में एक दूसरे के बगल में रहने के लिए कैसे मिल सकता हूं?

स्रोत

2016-07-14 Alexander Schlüter