title: How to let the last column of a CSS Grid with auto-fit shrink bellow the min value of minmax?
body: <p>I am using the following CSS Grid layout:</p>
  
  <pre class="lang-css prettyprint-override"><code>.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  }
  </code></pre>
  
  <p>This tries to fit as many 500px columns as possible then dispatches the remaining space evenly amongst the columns.</p>
  
  <p>The problem is that when there is only one column left (grid width &lt; 1000px) the column will shrink until it reaches 500px and will not shrink more than that, even if the grid gets smaller, causing the column to overflow.</p>
  
  <p>I've tried many combinations, including nesting minmax functions, but could not solve this issue.</p>