title: Align 3x3 grid relatively to the full viewport height without offset
body: <p>Well, I have grid that's 3x3 dimension, also I'm using CSS framework - <strong><a href="http://materializecss.com" rel="nofollow noreferrer">materializecss</a></strong> and I can't reach my goal which title says or this:</p>
  
  <p><img src="https://i.stack.imgur.com/9hGDa.jpg" alt="image"></p>
  
  <p>Their documentation <a href="http://materializecss.com/footer.html" rel="nofollow noreferrer"><strong>says</strong></a>: </p>
  
  <blockquote>
    <p>Note: We use flexbox to structure our html so that the footer is always on the bottom of the page. It is important to keep the structure of your page within the 3 HTML5 tags: <code>&lt;header&gt;, &lt;main&gt;, &lt;footer&gt;</code></p>
  </blockquote>
  
  <p>I did it. Also did just add <code>height: 100%, min-height: 100%</code> for <strong>html</strong>, <strong>body</strong> and it doesn't help at all. Thanks!</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>html,
  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  
  header {
    height: 50px;
  }
  
  main {
    flex: 1 0 auto;
  }
  
  #container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  
  header {
    flex-basis: 100%;
    color: #eb6a45;
    background-color: #88ba93;
    text-align: center;
    padding: 10px;
  }
  
  .item {
    flex-basis: 33%;
    flex-grow: 1;
    text-align: center;
    padding-top: 10vw;
    padding-bottom: 10vw;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-color: #48a089;
    color: #fefda5;
    transition: 0.3s ease-in-out background-color, 0.3s ease-in-out color;
  }
  
  .item:hover {
    background-color: #063328;
    color: #484848;
  }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  
  &lt;/header&gt;
  
  &lt;main&gt;
    &lt;div id="container"&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
      &lt;div class="item b"&gt;&lt;img height="100" width="100" src="#" /&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  
  &lt;footer&gt;
  
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is fiddle: <a href="https://jsfiddle.net/eeeek/2wjh35ne/" rel="nofollow noreferrer"><strong>ctrl + click</strong></a></p>