窗口变小时弹性项不收缩[重复]
我正在尝试在CSS flexbox中，将两个相邻的绘图拟合到一起。我希望它们在调整窗口大小时调整大小。当窗口变大时，它会按预期工作，但当窗口变小时，绘图不会缩小。
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);
});css lang-css prettyprint-override">.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的工作原理，但如果我用图像替换绘图，它们会像预期的那样缩小。
我试着调试它，发现plotlys的内部函数plotAutoSize，它调用窗口。getComputedStyle并相应地设置打印大小。我使用了控制台。记录以查看窗口的返回值。getComputedStyle，当窗口缩小时，它们会被“卡住”在最大的大小。
如何使绘图缩小到适合窗口，并在同一行中彼此相邻？
共有1个答案
弹性项目的初始设置为minwidth:auto。这意味着默认情况下，flex项不能小于其内容。
您可以使用min-ware： 0或overflow（可见以外的任何值）重写此设置。将此添加到您的代码中：
.plot-col {
min-width: 0;
}
修订小提琴
更多信息：为什么flex项目不缩小过去的内容大小？
-
更新：如果我必须使用flexbox，我认为没有简单的解决方案。我将使用“flex shrink:0”并使用媒体查询来调整设计。无论如何，谢谢你的帮助。 我有一个水平列表（显示： flex）与多个元素。当我缩小窗口大小时，列表元素开始缩小。不幸的是，元素的宽度几乎保持不变。锂元素占据了太多的空间。我希望li-元件的大小适合内容。如果我把"flex-收缩： 0"添加到li-元素中，宽度是正确的，但是我
-
我有一个为用户显示的元素列表，还有一个图标和两个按钮。到目前为止还不错，但我希望这个列表能够扩展到移动设备，并在必要时缩小。 当列表中的文本太长时，会阻止页面收缩，并强制显示水平滚动条。我试图实现的是，长描述文本缩小，在末尾显示3个点（省略号）。 容器元素显示为flex，文本容器具有flex收缩1，但它仍然拒绝收缩和溢出。 有人能告诉我我做错了什么吗？为什么是拒绝收缩？是否有任何方法可以在必要时仅
-
我有一个JScrollPane，其中包含一个JTextArea。当窗口最小化然后恢复时，JScrollPane将自行崩溃。注意，只有当JTextArea中的文本超过JTextArea的给定宽度和/或高度（即，出现水平或垂直滚动条）时，才会发生挤压。 这里的问题：JScrollpane在最小化后失去大小会带来同样的问题，但是这个问题从未得到解决，除了向JScrollPane添加权重、权重和填充约束，
-
问题内容： 我有4个flexbox列，并且一切正常，但是当我向列中添加一些文本并将其设置为大字体时，由于flex属性，它使列变宽了。 我尝试使用它并对其有所帮助，但是当我将列的大小调整为非常小的宽度时，仍然将文本中的字母分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。 （开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3
-
ScalingEntry SPI 名称 详细说明 ScalingEntry 弹性伸缩入口 已知实现类 详细说明 MySQLScalingEntry 基于 MySQL 的弹性伸缩入口 PostgreSQLScalingEntry 基于 PostgreSQL 的弹性伸缩入口
-
背景 Apache ShardingSphere 提供了数据分片的能力，可以将数据分散到不同的数据库节点上，提升整体处理能力。 但对于使用单数据库运行的系统来说，如何安全简单地将数据迁移至水平分片的数据库上，一直以来都是一个迫切的需求； 同时，对于已经使用了 Apache ShardingSphere 的用户来说，随着业务规模的快速变化，也可能需要对现有的分片集群进行弹性扩容或缩容。 简介 Sha