自适应画布宽度在flexbox布局w/ ResizeObserver

Question

我想让基于画布的uPlot在宽度上响应。

ResizeObserver观察父div宽度并相应地改变plot/canvas宽度。

它适用于简单的布局。如果父div是flexbox布局的一部分，增长有效，但收缩不起作用． 为什么?

const plotContainer1 = document.getElementById("plot-container1");
const plotContainer2 = document.getElementById("plot-container2");
const plot1 = document.getElementById("plot1");
const plot2 = document.getElementById("plot2");
const resizeObserver1 = new ResizeObserver(() => {
plot1.width = plotContainer1.clientWidth;
});
resizeObserver1.observe(plotContainer1);
const resizeObserver2 = new ResizeObserver(() => {
plot2.width = plotContainer2.clientWidth;
});
resizeObserver2.observe(plotContainer2);

.container {
display: flex;
}
.left {
width: 300px;
flex-grow: 0;
flex-shrink: 0;
}
.main {
width: 100%;
flex-grow: 0;
flex-shrink: 1;
}
.plot-container {
background: red;
}
.plot {
display: flex !important;
background: black;
}

<h1>Plot full width</h1>
<div class="plot-container" id="plot-container1">
Plot 1
<canvas class="plot" id="plot1"></canvas>
</div>
<h1>Plot in flexbox layout</h1>
<div class="container">
<div class="left">Navigation</div>
<div class="main">
<div class="plot-container" id="plot-container2">
Plot 2
<canvas class="plot" id="plot2"></canvas>
</div>
</div>
</div>

示例:https://codepen.io/lukasberbuer/pen/LYjLmdE

Answer 1

因为看起来，display:block和display:flex在宽度方面有稍微不同的行为。默认情况下，它们的宽度都是父元素的100%。当父母成长时，他们也随之成长。现在，当父结点缩小时，它们都试图保持它们的宽度是父结点的100%，但是它们包含了一些东西。它们包含的画布的宽度受到了限制。因此，在父元素从外部收缩和画布从内部推动之间存在冲突。

我相信display:block优先考虑父和收缩，作为回报，允许画布调整大小。

但display:flex似乎优先考虑画布，并防止收缩。

Answer 2

详细答案可在此找到:https://stackoverflow.com/a/36247448/9967707

只需将min-width: 0 !important;添加到.main。