Resizing chart issue with CSS Grid

Question

I am currently learning about CSS Grid and I am trying to use Chart.JS inside CSS grid item cells, but if the browser is resized the charts do not resize with the grid like other items would.

But if you refresh the browser at the new window size the charts & grid load correctly.

I have a CodePen & inserted snippet into StackOverflow here & would appreciate if anyone can give me any pointers on what I am doing wrong please.

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

This issue was raised on 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.

Adding min-width: 0 works both for flex-items and grid-items