Flex items not shrinking when window gets smaller

I'm trying to fit two plotly plots next to each other inside a CSS flexbox. I want them to resize when the window is resized. It works as expected when the window grows, but the plots don't shrink when the window gets smaller.

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/

I am probably misunderstanding how flexbox works, but if I replace the plots with images, they shrink as expected.

I have tried to debug this and found plotlys internal function plotAutoSize, which calls window.getComputedStyle and sets the plot size accordingly. I have used console.log to look at the return values of window.getComputedStyle and they get "stuck" at the largest size when the window shrinks.

How can I get the plots to shrink to fit the window and stay next to each other in the same row?

43431 次浏览

小开

最佳答案

An initial setting on flex items is min-width: auto. This means that a flex item cannot, by default, be smaller than its content.

You can override this setting with min-width: 0 or overflow with any value other than visible. Add this to your code:

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

Revised Fiddle

More info: Why doesn't flex item shrink past content size?