title: ChartJS, nested flexbox, not shrinking
body: <p>I have a ChartJS canvas object that is shrinking when it is in a single flexbox, but not shrinking when it is in a nested flexbox and looking for some advice on how to handle this; e.g. by simple CSS, by handling an onresize event and modifying the canvas element. I think it first start by understanding the root cause of this behavior.</p>
  <p>I tend to believe the issue is related to the responsive limitations of the canvas element, but if that it the case it should also happen with a single flexbox element, right?</p>
  <ul>
  <li>I attached a repro. Note: the resizing works if I only keep the .column flexbox, and it fails when the .column flexbox is nested in the .row flexbox.</li>
  <li>How to reproduce: open the browser window in a smaller than maximized size. Then resize the window to maximum, then resize back to a smaller size. The Chart is not resized back.</li>
  <li>I also tried putting a min-width:1px and min-height:1px on the .chart class, but in this case it only shrinks width and not height (weird!)</li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Chart(document.getElementById("bar-chart"), {
      type: 'bar',
      data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [
          {
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
          }
        ]
      },
      options: {
        animation : false,
        responsive : true,
        maintainAspectRatio : false,
        legend: { display: false },
        title: {
          display: true,
          text: 'Predicted world population (millions) in 2050'
        }
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body{
      margin:0;
      border:0;
  }
  .row{
      position:relative;
      display:flex;
      flex-direction:row;
      height:100%;
  }
  .fields, .info{
      flex:0 0 250px; 
  }
  .chart{
      flex:1 1 auto;
      border:1px solid black;
  }
      .column{
          display:flex;
          flex-direction:column;
          height:100%;
      }
      .head{
          flex:0 1 40px;  
          border:1px solid black;
      }
      .main{
          flex:1 1 auto;
          border:1px solid black;
      }
      .foot{
          flex:0 1 40px;
          border:1px solid black;
          overflow:hidden;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
      &lt;div class="fields"&gt;fields&lt;/div&gt;
      &lt;div class="chart"&gt;
          &lt;div class="column"&gt;
              &lt;div class="head"&gt;head&lt;/div&gt;
              &lt;div class="main"&gt;&lt;canvas id="bar-chart"&gt;&lt;/canvas&gt;&lt;/div&gt;
              &lt;div class="foot"&gt;foot&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="info"&gt;info&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>