title: Chrome / Firefox percentage height differences in CSS Grid
body: <p>Please note, the following problem can be solved by using fr units instead of % and auto, but I am looking for an explanation as to why the problem occurs in the first place.</p>
  
  <p>In my code below,</p>
  
  <p><strong>Firefox</strong>: Does not obey the values for <code>grid-template-rows</code>. Applies an equal height to each row but the grid items do not overflow the container.  </p>
  
  <p><strong>Chrome</strong>: Seems to obey the <code>grid-template-rows</code> property but the grid items overflow the container.  </p>
  
  <p>Initially I thought the issue was with <em>%</em> but it is an allowable unit for the row. I swapped out the <em>auto</em> value for <em>10%</em> but that created its own problem.</p>
  
  <p>I've looked at the documentation but I'm missing something.</p>
  
  <p>Anyone have a straight-forward explanation?</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>body {
    margin: 40px;
  }
  
  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 30% auto 60%;
    background-color: #f00;
    color: #444;
  }
  
  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="box"&gt;A&lt;/div&gt;
    &lt;div class="box"&gt;B&lt;/div&gt;
    &lt;div class="box"&gt;C&lt;/div&gt;
    &lt;div class="box"&gt;D&lt;/div&gt;
    &lt;div class="box"&gt;E&lt;/div&gt;
    &lt;div class="box"&gt;F&lt;/div&gt;
    &lt;div class="box"&gt;G&lt;/div&gt;
    &lt;div class="box"&gt;H&lt;/div&gt;
    &lt;div class="box"&gt;I&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/caseyc/pen/xQvEvo" rel="nofollow noreferrer">Codepen</a></p>