我目前正在学习 CSS 网格，我正在尝试在 CSS 网格元素单元格中使用 Chart.JS，但是如果调整浏览器的大小，图表不会像其他元素那样随着网格调整大小。
但是如果您以新的窗口大小刷新浏览器，图表和网格会正确加载。
我有一个 CodePen 并在此处将代码片段插入到 StackOverflow 中，如果有人能给我任何关于我做错了什么的指示，我将不胜感激。
https://codepen.io/warrenbuckley/pen/BXaQwY
var lineCtx = document.getElementById('line').getContext('2d');
var lineChart = new Chart(lineCtx, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri'],
datasets: [{
label: 'Number of Members a Day',
data: [12, 5, 8, 35, 4],
backgroundColor: [
'#ff8a89'
],
borderColor: [
'#ff8a89'
],
borderWidth: 4,
fill: false,
pointBorderWidth: 4,
pointBackgroundColor: "#ffffff",
pointBorderColor: "#ff8a89",
pointRadius: 8,
pointHoverBorderWidth: 4,
pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#ff8a89",
pointHoverRadius: 8
},
{
label: 'Failed Logins',
data: [34, 3, 4, 2, 1],
backgroundColor: [
'#3544b1'
],
borderColor: [
'#3544b1'
],
borderWidth: 4,
fill: false,
pointBorderWidth: 4,
pointBackgroundColor: "#ffffff",
pointBorderColor: "#3544b1",
pointRadius: 8,
pointHoverBorderWidth: 4,
pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#3544b1",
pointHoverRadius: 8
}
]
},
options: {
layout: {
padding: {
top: 10
}
}
}
});
var doughnutCtx = document.getElementById('doughnut').getContext('2d');
var doughnutChart = new Chart(doughnutCtx, {
type: "doughnut",
data: {
labels: ['Male', 'Female', 'Unknown'],
datasets: [{
label: 'Members',
data: [20, 62, 8],
backgroundColor: [
'#3544b1', '#ff8a89', '#fad648'
]
}]
},
options: {
legend: {
display: true,
position: 'left'
}
}
});* {
font-family: sans-serif;
}
.box {
border: 5px solid plum;
box-sizing: border-box;
}
.umb-box {
border: 5px dashed goldenrod;
box-sizing: border-box;
}
.insights .grid-container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
}
.insights .graph {
position: relative;
/* UPDATED (NOW WEIRD SLOW RESIZE DOWN ANIMATION) */
background:purple;
width:99.9%;
}
.insights .numbers .umb-box-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
}
.insights .numbers .umb-box-content div {
background: rgba(0, 0, 0, 0.15);
text-align: center;
padding: 10px;
}
.insights .numbers .umb-box-content span {
font-size: 18px;
}
.insights .numbers .umb-box-content span.positive {
color: #1fb572;
}
.insights .numbers .umb-box-content span.negative {
color: #d42054;
}
.insights .numbers .umb-box-content h1 {
font-weight: bold;
margin: 0;
}
/* When we get too small - lets stack all items into one column */
@media only screen and (max-width: 1600px) {
.insights .grid-container {
background: rgba(255, 0, 0, 0.1);
grid-template-columns: 1fr;
}
}<!-- Chart.JS Lib -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div>
<div class="insights">
<!-- Container -->
<div class="grid-container">
<div class="box box1">
<div class="umb-box">
<div class="umb-box-content">
<div class="graph">
<canvas id="line"></canvas>
</div>
</div>
</div>
</div>
<div class="box box2">
<div class="umb-box">
<div class="umb-box-content">
<div class="graph">
<canvas id="doughnut"></canvas>
</div>
</div>
</div>
</div>
<div class="box box3 numbers">
<div class="umb-box">
<div class="umb-box-content">
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 5%</span>
<h1>4,354</h1>
<small>Orders</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-down"></i> 10%</span>
<h1>43</h1>
<small>Emails</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>43</h1>
<small>Errors</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-down"></i> 10%</span>
<h1>430,584</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
</div>
</div>
</div>
<div class="box box6 numbers">
<div class="umb-box">
<div class="umb-box-content">
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 5%</span>
<h1>4,354</h1>
<small>Orders</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-down"></i> 10%</span>
<h1>43</h1>
<small>Emails</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>43</h1>
<small>Errors</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-down"></i> 10%</span>
<h1>430,584</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
</div>
</div>
</div>
<div class="box box7 numbers">
<div class="umb-box">
<div class="umb-box-content">
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 5%</span>
<h1>4,354</h1>
<small>Orders</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-down"></i> 10%</span>
<h1>43</h1>
<small>Emails</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>43</h1>
<small>Errors</small>
</div>
<div>
<span class="negative"><i class="icon icon-chevron-down"></i> 10%</span>
<h1>430,584</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
</div>
</div>
</div>
<div class="box box8 numbers">
<div class="umb-box">
<div class="umb-box-content">
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
</div>
</div>
</div>
<div class="box box9 numbers">
<div class="umb-box">
<div class="umb-box-content">
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
</div>
</div>
</div>
<div class="box box10 numbers">
<div class="umb-box">
<div class="umb-box-content">
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
<div>
<span class="positive"><i class="icon icon-chevron-up"></i> 10%</span>
<h1>4,584,475</h1>
<small>Orders</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
这个问题是在 GitHub 上提出的 here
the above suggestion of min-width: 0 seems to resolve this issue. not on the immediate container of the chart, but on the flex parent.
添加 min-width: 0 对 flex-items 和 grid-items 都有效
https://stackoverflow.com/questions/57090660/
相关文章：
php - 使用 Gsuite 邮件时电子邮件在 laravel 上不起作用
ruby-on-rails - Rails update_attributes 如果值存在，否则为
python - 需要使用 pyodbc 将较小的批处理插入到 Teradata 表中
c# - 具有 Azure Active Directory 的 Web 应用程序始终重定向到 '~
.net-core - 部署到 Azure 后，在 Angular 7 中使用 i18n 的本地化不
git - 为什么每次更新变更日志时我的旧提交都会重新出现？
kubernetes-helm - 错误 : validation failed: unable t