Pencereler küçülüyorken Flex öğeleri küçülüyor

Bir CSS flexbox içinde birbirinin yanına iki arsaya sığdırmaya çalışıyorum. Pencere yeniden boyutlandırıldığında yeniden boyutlandırılmasını istiyorum. Pencere büyüdüğünde beklendiği gibi çalışır, ancak pencere küçüldüğünde grafikler küçülmez. Muhtemelen ben görüntülerle araziler yerine, beklendiği gibi FlexBox çalışır, ancak, bunlar küçültmek nasıl yanlış anlama am https://jsfiddle.net/bd0reepd/Pencereler küçülüyorken Flex öğeleri küçülüyor

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

Bunu hata ayıklamaya çalıştım ve numaralı çağıran iç işlevi plotAutoSize buldu ve plot boyutunu buna göre ayarlar. window.getComputedStyle'un dönüş değerlerine bakmak için console.log'u kullandım ve pencere küçüldüklerinde en büyük boyutta "sıkışmış" oluyorlar.

Grafikleri pencereye sığacak şekilde küçültmek ve aynı satırda yan yana kalmak için grafikleri nasıl alabilirim?

kaynak

2016-07-14 Alexander Schlüter