Gli elementi flessibili non si restringono quando la finestra diventa più piccola

Sto provando ad adattare due trame consecutive l'una accanto all'altra all'interno di una flexbox CSS. Voglio che vengano ridimensionate quando la finestra viene ridimensionata. Funziona come previsto quando la finestra cresce, ma i grafici non si restringono quando la finestra diventa più piccola.Gli elementi flessibili non si restringono quando la finestra diventa più piccola

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/

probabilmente sto equivoco come funziona Flexbox, ma se sostituisco le trame con le immagini, si restringono come previsto.

Ho provato a eseguire il debug di questo e trovato la funzione interna di plotlys plotAutoSize, che chiama window.getComputedStyle e imposta le dimensioni del tracciato di conseguenza. Ho usato console.log per esaminare i valori di ritorno di window.getComputedStyle e si "bloccano" alla dimensione maggiore quando la finestra si restringe.

Come posso ridurre i grafici per adattarli alla finestra e rimanere uno accanto all'altro nella stessa fila?

fonte

2016-07-14 Alexander Schlüter

Un'impostazione iniziale su articoli flessibili è min-width: auto. Ciò significa che un oggetto flessibile non può, di default, essere più piccolo del suo contenuto.

È possibile sostituire questa impostazione con min-width: 0 o overflow con un valore diverso da visible. Aggiungi questo al vostro codice:

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

Revised Fiddle

Maggiori informazioni: Why doesn't flex item shrink past content size?

fonte

2016-07-14 20:10:34

... e così termina 45 minuti di martellamento mia testa sulla mia scrivania. grazie mille! –

questo era difficile; Grazie per l'aiuto –

Gli elementi flessibili non si restringono quando la finestra diventa più piccola

risposta

Problemi correlati