Flex items not shrinking when window gets smaller

javascript css flexbox plotly

34,659

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?

34,659

Author by

Admin

Updated on July 06, 2022

Comments

Admin almost 2 years

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?

Mike Davlantes almost 7 years

...and thus ends 45 minutes of pounding my head on my desk. thanks so much!
Coty Embry over 6 years

this was a hard one; thank you for the help
Hamid about 6 years

Thanks saved me a few hours of hair pulling!
Juan Campa almost 6 years

@Hamid too late for me. I'm bald now
YugoAmaryl over 5 years

this is so important, they should write it on the fisrt line of the doc
carinlynchin over 5 years

omg this is great.. but WHY... why would they do that to begin with..
Michael Benjamin over 5 years

@carinlynchin, it's explained here: w3.org/TR/css-flexbox-1/#min-size-auto
Keavon over 4 years

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;.
evilkos about 4 years

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)
kfir124 over 3 years

You are a god, this is great!
Nick about 3 years

Wow. This is very helpful. Spent half day on this.
Seth Painter almost 3 years

I will never forget what you have done for me
Axel Samyn almost 2 years

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 !
Dries almost 2 years

This also counts for min-height when working with flex-direction: column;