title: background-color doesn't work when using flexbox
body: <p>I started using flexbox for my footers and now on all of my pages with forms the background-color is now the default white.  Here is an example of one of my pages:</p>
  
  <p>login.php</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 {
      background-color: #211e1e;
      display: flex;
      flex-direction: column;
      height: 95vh;
  }
  
  h1 {
      color: #99cc00;
      text-align: center;
  }
  
  .content {
      flex: 1 0 auto;
  }
  
  footer {
      text-align: center;
      font-weight: lighter;
      color: #99cc00;
      font-size: 10px;
      flex-shrink: 0;
  }
  
  h3 {
      position: absolute;
      font-weight: bold;
      color: #99cc00;
      font-size: 15px;
      width: 100%;
      top: 91.5%;
  
  }
  
  .button {
      background-color: #211e1e;
      color: white;
      font-size: 24px;
      /*padding: 15px 50px;*/
      transition-duration: .4s;
      border: greenyellow;
      width: 250px;
      /* width of button */
      height: 50px;
      /* height of button */
  }
  
  .buttonColor:hover {
      color: black;
      background-color: greenyellow;
  }
  
  h1 {
      text-align: center;
      bottom: 25%;
  }
  
  content {
      align-items: center;
      justify-content: center;
  }
  
  .signin {
      color: #99cc00;
      margin: auto;
      font-size: 24px;
  }
  
  .loginInput {
      font-size: 24px;
  }
  
  .loginButton {
      background-color: #211e1e;
      color: white;
      font-size: 24px;
      padding: 10px 50px;
      transition-duration: .4s;
      border: greenyellow;
  }
  
  .loginButtonColor:hover {
      color: black;
      background-color: greenyellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;link rel="icon" href="../../favicon.ico"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;TapLovers&lt;/title&gt;
      &lt;link rel="stylesheet" href="../background.css"&gt;
      &lt;link rel="stylesheet" href="login.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=content&gt;
          &lt;h1&gt;&lt;img src="../../36x36-icon.png"&gt;apLovers&lt;/h1&gt;
          &lt;form class="signin"&gt;
              &lt;input type="text" email="email" placeholder="Email" class="loginInput"&gt;&lt;br&gt;
              &lt;input type="text" password="password" placeholder="Password" class="loginInput"&gt;&lt;br&gt;
              &lt;input type="submit" name="submit" id="login" class="loginButton loginButtonColor" value="Login To TapLovers!" /&gt;&lt;br&gt;&lt;br&gt;
              &lt;a href="../register/register.php"&gt;
                  &lt;font color="#99cc00"&gt;Create a FREE TapLovers Account!&lt;/font&gt;
              &lt;/a&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;footer&gt;
          &lt;h3&gt;&lt;img src="../../favicon.ico"&gt;apLovers&lt;/h3&gt;&lt;br&gt;&amp;copy 2018 TapLovers, All Rights Reserved
      &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also I was trying to center my forms and my title using flexbox as well and I haven't gotten that working either.  I'm not really sure what other details would be useful for this particular problem.  If you need any more details just reply below and I'll answer them as they come out.</p>
  
  <p>EDIT: The snippet that compiles on stack overflow shows my background just fine.  What's more is if I use ctrl+shift+i on my page then the background works but if I just reload on my page then the background will turn white.</p>