title: Grid renders different in page vs. fiddle
body: <p>I want to create a square grid with HTML/CSS. I have the following code, which does just that, but it clips the sides and bottom, when I use it in my actual page compared to my fiddle.</p>
  <p>The raw HTML/CSS looks like this:</p>
  <p><strong>CSS</strong></p>
  <pre><code>.grid {
    margin: 0 auto;
    background: black;
    max-width: 90vh;
    max-height: 90vh;
    padding: 1px;
  }
  
  .row {
    display: flex;
  }
  .box {
    background: white;
    margin: 1px;
    color: black;
    font-weight: bold;
    flex: 1 0 auto;
    position: relative;
  }
  .box::after {
    content: &quot;&quot;;
    float: left;
    display: block;
    padding-top: 100%;
  }
  .box .inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;grid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;0&lt;/div&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;1&lt;/div&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;2&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;20&lt;/div&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;21&lt;/div&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;22&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;40&lt;/div&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;41&lt;/div&gt;&lt;/div&gt;
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;42&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The real page uses a 50x50 grid, which I didn't want to bother you with, but check out <a href="https://jsfiddle.net/BuildItBusk/69mpf0a4/6/" rel="nofollow noreferrer">the fiddle</a>.</p>
  <p>In the fiddle it looks really nice, like this:</p>
  <p><a href="https://i.stack.imgur.com/s2sc7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s2sc7.png" alt="Grid in fiddle" /></a></p>
  <p>But when it goes into the real page, it looks like this (clipped a bit, to avoid cluttering):</p>
  <p><a href="https://i.stack.imgur.com/s2806.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s2806.png" alt="Grid in actual page" /></a></p>
  <p>I am aware that the actual page also includes stuff like a navigation bar, etc. which takes up some space. But that is the same in the fiddle I guess? Isn't <code>90vh</code> supposed to take up 90% of the space available to it?</p>
  <p>If anyone wants to generate the grid, I am doing that with Blazor (server side):</p>
  <pre><code>@page &quot;/grid&quot;
  
  &lt;div class=&quot;grid&quot;&gt;
  @for (int r = 0; r &lt; _numRows; r++) {
      &lt;div class=&quot;row&quot;&gt;
      @for (int c = 0; c &lt; _numCols; c++) {
          int rr = r; // Row of the specific div
          int cc = c; // Column of the specifc div
          &lt;div class=&quot;box&quot;&gt;&lt;div class=&quot;inner&quot;&gt;@(c + r * _numRows)&lt;/div&gt;&lt;/div&gt;
      }
      &lt;/div&gt;
  }
  &lt;/div&gt;
  </code></pre>