web-dev-qa-db-fra.com

Les éléments flexibles ne rétrécissent pas lorsque la fenêtre devient plus petite

J'essaie d'adapter deux tracés intrigants l'un à côté de l'autre à l'intérieur d'une flexbox CSS. Je veux qu'ils redimensionnent lorsque la fenêtre est redimensionnée. Cela fonctionne comme prévu lorsque la fenêtre s'agrandit, mais les tracés ne rétrécissent pas lorsque la fenêtre devient plus petite.

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/

Je ne comprends probablement pas comment fonctionne flexbox, mais si je remplace les tracés par des images, ils rétrécissent comme prévu.

J'ai essayé de déboguer ceci et j'ai trouvé la fonction interne plotlys plotAutoSize, qui appelle window.getComputedStyle et définit la taille du tracé en conséquence. J'ai utilisé console.log pour examiner les valeurs de retour de window.getComputedStyle et ils se "bloquent" à la plus grande taille lorsque la fenêtre se rétrécit.

Comment puis-je faire rétrécir les parcelles pour qu'elles s'adaptent à la fenêtre et rester côte à côte dans la même rangée?

javascriptcsscss3flexboxplotly
32
Alexander Schlüter

Un paramètre initial sur les éléments flexibles est min-width: auto. Cela signifie qu'un élément flexible ne peut pas, par défaut, être plus petit que son contenu.

Vous pouvez remplacer ce paramètre avec min-width: 0 ou overflow avec une valeur autre que visible. Ajoutez ceci à votre code:

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

violon révisé

Plus d'informations: Pourquoi l'élément flexible ne réduit-il pas la taille du contenu?

88
Michael_B