javascript - 使用 CSS Grid 调整图表大小问题

Question

我目前正在学习 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>

Answer 1

这个问题是在 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 都有效