title: Why can't I set html min height to 100%?
body: <p>HTML Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;&lt;/head&gt;
     &lt;body&gt;
        &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
        &lt;div class="sheet" style="width:80%;max-width:1024px;height:400px;"&gt;&lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>html,
  body {
      min-height: 100%;
      margin: 0;
      padding: 0
  }
  body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  .sheet {
      background-color: red
  }
  </code></pre>
  
  <p>What I expected to see was a red rectangle floating in the middle of the screen but what I get is the rectangle being at the top-middle.</p>
  
  <p>It never worked in FF, it worked in chrome before adding the DOCTYPE tag but after that it no longer works in chrome either.</p>
  
  <p>What does work is when I use <code>height</code> instead of <code>min-height</code> but I don't want to pin down the height value to the size of the screen since I may need it when containers long enough to scroll come into play.</p>