title: Why does minmax(0, 1fr) work for long elements while 1fr doesn't?
body: <p>So I have this grid:</p>
  
  <pre><code>+---------+------------------------------+---------+    
  |  &lt;div&gt;  |  &lt;p&gt; - 1000 characters long  |  &lt;div&gt;  |
  +---------+------------------------------+---------+
  </code></pre>
  
  <p>Inside <code>p</code> there's super long string with no spaces. <code>div</code>s are placeholders with fixed dimensions.
  This produces the above:</p>
  
  <pre><code>  display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto minmax(0, 1fr) auto;
  </code></pre>
  
  <p>But changing <code>minmax(0, 1fr)</code> to <code>1fr</code> gives this:</p>
  
  <pre><code>+---------+----------------------------------------+    
  |  &lt;div&gt;  |               &lt;p&gt; - 1000 characters long  |  &lt;div&gt;  |
  +---------+----------------------------------------+
  </code></pre>
  
  <p>It overflows out of its parent and way out of screen size. Why isn't it behaving like minmax?</p>
  
  <p><a href="https://codepen.io/anon/pen/MPQZGB" rel="noreferrer">Codepen</a></p>