Alexander Schlüter Alexander Schlüter - 4 months ago 26
CSS Question

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?

Answer

If you want flex items to stay on a single line, then get rid of the multi-line flex container you have. With flex-wrap: wrap, you're giving flex items permission to wrap.

Instead, force items to remain on a single line:

.my-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* ADJUSTED */
    width: 100%;
    height: 100%;
}

Second, you're preventing your flex items from shrinking with flex-shrink: 0:

.plot-col {
    flex: 0 0 50%; /* flex-grow, flex-shrink, flex-basis */
}

Switch that to:

.plot-col {
    flex: 0 1 50%;
}

Third, a flex item, by default, cannot be smaller than its content (initial setting: min-width: auto). Add this to your code:

.plot-col {
    flex: 0 1 50%;
    min-width: 0;
}

Read more about minimum flex sizing here: Why doesn't flex item shrink past content size?

In this particular case, because you're using percentage units for your flex-basis, the only fix you need is #3: min-width: 0.

Revised Fiddle