title: CSS grid min-content not shrinking to correct size
body: <p>I'm new to grids and I'm trying to understand some cell sizing concepts.</p>
  
  <p>I have a container that is set to <code>display: grid</code> and a <code>main</code> element centered in the grid where the <code>min-content</code> column/row is.</p>
  
  <pre><code>.main-container {
    display: grid;
    grid-template-columns: 1fr min-content 1fr;
    grid-template-rows: 1fr min-content 1fr;
  }
  
  .main-container main {
    grid-column: span 1
    grid-column-start: 2
    grid-row: span 1
    grid-row-start: 2
  }
  
  canvas {
    width: 800px;
    height: 600px;
  }
  </code></pre>
  
  <p>and html</p>
  
  <pre><code>&lt;!-- page --&gt;
  &lt;html&gt;
  ...
  &lt;body&gt;
    &lt;div class="main-container"&gt;
      &lt;main&gt;
        &lt;canvas /&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/coderatchet/pen/ZrVBdG" rel="nofollow noreferrer">codepen example</a></p>
  
  <p>The application will center around the happenings of the canvas, and due to the nature of aspect ratios in canvas rendering, I want the center grid cell to conform to the size of the canvas and not the other way around.</p>
  
  <p>I expect that due to both <code>main</code> and <code>canvas</code> being <code>border-box</code>'ed and the size of the canvas being absolute, then the <code>main</code> element should theoretically not effect the calculated <code>min-content</code> height. this isn't the case for width but somehow the height adds 4 extra pixels.</p>
  
  <p><a href="https://i.stack.imgur.com/S6ErF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S6ErF.png" alt="4px high gap"></a></p>
  
  <p>Where did these extra height pixels come from and how can I ensure they don't appear</p>
  
  <blockquote>
    <p>Setting the height of main explicitly to 600px does solve the problem, however this is redundant information and I anticipate there is a solution not involving hardcoded height bandaids.</p>
  </blockquote>