title: Percentages in minmax CSS grid causing overflow
body: <p>I'm trying to build a responsive CSS grid with three columns that wrap when necessary. I want the minimum column width to be 200px, otherwise use the percentage 30%.</p>
  
  <p>I believe I can use the <code>minmax</code> CSS calculation to do this, but some strange overflow error occurs when I use percentages rather than pixels.</p>
  
  <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>.wrapper-pix {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 360px));
  }
  
  .wrapper-percent {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 30%));
  }
  
  .box-pix{
    background: #4299E1;
    height: 200px;
  }
  
  .box-percent{
    background: #F56565;
    height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper-pix"&gt;
    &lt;div class="box-pix"&gt;&lt;/div&gt;
    &lt;div class="box-pix"&gt;&lt;/div&gt;
    &lt;div class="box-pix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper-percent"&gt;
    &lt;div class="box-percent"&gt;&lt;/div&gt;
    &lt;div class="box-percent"&gt;&lt;/div&gt;
    &lt;div class="box-percent"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please also see this CodePen: <a href="https://codepen.io/willjonty/pen/ExVpVza" rel="nofollow noreferrer">https://codepen.io/willjonty/pen/ExVpVza</a>.</p>
  
  <p>The blue boxes prefer to wrap and stay at their maximum percentage until the window becomes particularly small. The red boxes, however, will resize their max value with the percentage until they reach the 200px breakpoint. So far, this is all good.</p>
  
  <p>I would expect the red boxes to wrap when the viewport reaches 640px, which is 200 * 3 (for the three columns), plus 2 * 20px gaps. Notice however that when the viewport becomes smaller, the red boxes do not wrap at all, and instead overflow into a hidden part of the window. For some reason, the third box will only wrap when the viewport is 399 or less.</p>
  
  <p>Does anyone know <strong>why CSS grid behaves like this</strong>? And how I might implement a column max-width of 30% that will wrap without any overflow?</p>
  
  <p>I would use <code>fr</code> units, but those will hijack auto-fit to increase the number of columns in a row depending on the data. I want 3 equally-sized columns.</p>
  
  <p>Thank you in advance.</p>