Elementy elastyczne nie kurczą się, gdy okno staje się mniejsze

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?

Źródło

2016-07-14 Alexander Schlüter

Początkowe ustawienie elementów elastycznych to min-width: auto. Oznacza to, że element elastyczny nie może domyślnie być mniejszy niż jego zawartość.

Możesz zmienić to ustawienie na min-width: 0 lub overflow z dowolną wartością inną niż visible. Dodaj do tego kodu:

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

Revised Fiddle

Więcej informacji: Why doesn't flex item shrink past content size?

Źródło

2016-07-14 20:10:34

... 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 –

Elementy elastyczne nie kurczą się, gdy okno staje się mniejsze

Odpowiedz

Powiązane problemy