Flex-Elemente schrumpfen nicht, wenn das Fenster kleiner wird

Ich versuche zwei Plot-Plots nebeneinander in einer CSS-Flexbox zu platzieren. Ich möchte, dass sie die Größe ändern, wenn das Fenster in der Größe geändert wird. Es funktioniert wie erwartet, wenn das Fenster wächst, aber die Plots schrumpfen nicht, wenn das Fenster kleiner wird.Flex-Elemente schrumpfen nicht, wenn das Fenster kleiner wird

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/

ich wahrscheinlich bin Missverständnis, wie Flexbox funktioniert, aber wenn ich die Grundstücke mit Bildern ersetzen, sie wie erwartet schrumpfen.

Ich habe versucht, dies zu debuggen und gefunden Plotlys interne Funktion plotAutoSize, die window.getComputedStyle aufruft und legt die Grundstücksgröße entsprechend fest. Ich habe console.log verwendet, um die Rückgabewerte von window.getComputedStyle zu betrachten, und sie "stecken" bei der größten Größe, wenn das Fenster schrumpft.

Wie kann ich die Plots verkleinern, um in das Fenster zu passen und nebeneinander in der gleichen Reihe zu bleiben?

Quelle

2016-07-14 Alexander Schlüter

Eine anfängliche Einstellung für Flex-Elemente lautet min-width: auto. Dies bedeutet, dass ein Flex-Element standardmäßig nicht kleiner als sein Inhalt sein kann.

Sie können diese Einstellung mit min-width: 0 oder overflow mit einem anderen Wert als visible überschreiben. Fügen Sie diese auf Ihren Code:

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

Revised Fiddle

Weitere Informationen: Why doesn't flex item shrink past content size?

Quelle

2016-07-14 20:10:34

... und endet somit 45 Minuten hämmern meinen Kopf auf meinem Schreibtisch. vielen Dank! –

das war hart; danke für die Hilfe –

Flex-Elemente schrumpfen nicht, wenn das Fenster kleiner wird

Antwort

Verwandte Themen