title: Grid columns wont fit content
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#grid {
    display: grid;
    grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-flow: column;
    height: 900px;
    width: 100%;
  }
  
  #grid &gt; section {
    border: 2px solid cyan;
  }
  
  #grid &gt; section &gt; div {
    border: 2px solid red;
    height: 80%;
    aspect-ratio: 1/1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="grid"&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
        &lt;section&gt;
          &lt;div&gt;&lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In this snippet, the blue boxes are not fitting to the req squares inside of them.</p>
  <p>I want the width of the blue rectangle to match the red boxes - the blue rectangles currently have an auto width.</p>
  <p>Does anyone know how to fix this?</p>
  <hr />
  <p>One interesting thing is if I set (in dev tools)</p>
  <pre class="lang-css prettyprint-override"><code>    #grid &gt; section {
        width: max-content;
      }
  </code></pre>
  <p>Then the issue is temporarily fixed, until I reload the page (with <code>width: max-content</code> still set), then it's back to being broken like above; so it only fixes on an update (but not initial rendering). This makes me think maybe this is a CSS rendering bug
  <a href="https://i.stack.imgur.com/zdRhB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zdRhB.png" alt="enter image description here" /></a></p>