使用 CSS 网格调整图表大小问题

我目前正在学习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上提出的

上述最小宽度：0的建议似乎可以解决此问题。不是在图表的直接容器上，而是在 Flex 父级上。

添加min-width: 0适用于弹性项和网格项

相关内容

最新更新

热门标签：