Próbuję dopasować dwie spiskowane działki obok siebie wewnątrz flexbox CSS. Chcę, aby zmieniły rozmiar po zmianie rozmiaru okna. Działa zgodnie z oczekiwaniami, gdy okno rośnie, ale wykresy nie kurczą się, gdy okno staje się mniejsze.Elementy elastyczne nie kurczą się, gdy okno staje się mniejsze
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/
jestem chyba nieporozumienie, jak działa schematu flexbox, ale jeśli mam wymienić działek obrazami, one kurczyć, jak oczekiwano.
Próbowałem debugować to i znalazłem wewnętrzną funkcję spiskującą plotAutoSize, która wywołuje window.getComputedStyle i ustawia odpowiednio rozmiar wydruku. Użyłem console.log, aby przyjrzeć się wartościom zwracanym przez window.getComputedStyle i "utknąłem" w największym rozmiarze, gdy okno się kurczy.
W jaki sposób mogę uzyskać zmniejszenie kurtyny, aby dopasować się do okna i pozostać obok siebie w tym samym rzędzie?
... a więc kończy się 45 minut walenie głową na moim biurku. Dzięki wielkie! –
to było trudne; Dziękuję za pomoc –