Flex items not shrinking when window gets smaller

Question

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?

Michael Benjamin · Accepted Answer · 2022-12-19T17:06:47.007

259

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 don't flex items shrink past content size?

The reason for this setting is explained here: w3.org/TR/css-flexbox-1/#min-size-auto).

edited Dec 19 '22 at 17:06

answered Jul 14 '16 at 20:10

Michael Benjamin

346,931
104
581
701

74

...and thus ends 45 minutes of pounding my head on my desk. thanks so much! – Mike Davlantes Jun 22 '17 at 03:25
19

this is so important, they should write it on the fisrt line of the doc – YugoAmaryl Aug 18 '18 at 11:36
1

For my case, this helped partially shrink my content but it didn't want to shrink all the way to fit the flex sizing. What did work was setting `width: 0;` instead of `min-width: 0;`. – Keavon Sep 11 '19 at 21:46
2

`overflow: hidden` on the container solved it for my case, so don't forget to also check out the suggested original question at the very top of the page (in the "duplicate" notice) – evilkos Feb 21 '20 at 11:27
Fact is my table had the 'responsive-table' class which made me think it could not come from content size... but it did... Thanks a lot ! – Axel Samyn May 27 '22 at 15:21
This also counts for min-height when working with `flex-direction: column;` – Dries Jun 02 '22 at 06:49
1

Oh man, you not just saved my day, also my job! – Sathya Aug 10 '23 at 22:20

Flex items not shrinking when window gets smaller

1 Answers1

Linked