web-dev-qa-db-ja.com

ウィンドウが小さくなってもFlexアイテムが縮小しない

私は、CSSフレックスボックス内で2つのプロット図を隣り合わせに収めようとしています。ウィンドウのサイズが変更されたときにサイズを変更してほしい。ウィンドウが大きくなると期待どおりに動作しますが、ウィンドウが小さくなってもプロットは縮小しません。

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/

おそらくflexboxがどのように機能するかを誤解しているかもしれませんが、プロットをイメージに置き換えると、予想どおりに縮小します。

私はこれをデバッグしようとしましたが、window.getComputedStyleを呼び出し、それに応じてプロットサイズを設定するplotlys内部関数plotAutoSizeを見つけました。 console.logを使用してwindow.getComputedStyleの戻り値を確認しましたが、ウィンドウが縮小すると最大サイズで「スタック」します。

ウィンドウに収まるようにプロットを縮小して、同じ行で隣り合わせに保つにはどうすればよいですか？

javascriptcsscss3flexboxplotly
32
Alexander Schlüter

フレックスアイテムの初期設定はmin-width: autoです。つまり、デフォルトでは、フレックスアイテムをそのコンテンツより小さくすることはできません。

この設定は、min-width: 0またはoverflow以外の値でvisibleで上書きできます。これをコードに追加します。

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

改訂版フィドル

詳細： フレックスアイテムがコンテンツサイズを超えて縮小しないのはなぜですか？

88
Michael_B