title: Not able to vertically align items in flexbox
body: <p>I am learning to use flexbox and I am not able to align content vertically inside of the class <code>.headercontent</code>. it seems to honor everything else like <code>justify-content</code> but ignores <code>align-content</code>. I searched and found <a href="https://stackoverflow.com/questions/37226787/align-content-not-working-on-flex-items/52621741">this</a> thread and this seems to suggest that the parent should have height explicitly set. I have set height by setting <code>flex-basis</code> and <code>flex-grow</code> and a <code>min-height</code>. But still by <code>div</code> containing the <code>h1</code> is stuck to the top of the <code>header</code>. I want that green div to be in the vertical center of the <code>header</code>. what am I doing wrong?</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 {
              box-sizing: border-box;
              margin: 0;
              padding: 0;
              font-size: 100%;
              line-height: 1.2em;
            }
            body {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: stretch;
              height: 100vh;
              background-color: #cdc9c1;
            }
            header {
              background-color: #a99879;
              flex-basis: 10%;
              flex-grow: 1;
              min-height: 20px;
            }
            main {
              background-color: #5b431a;
              flex-basis: 80%;
              flex-grow: 8;
            }
            footer {
              background-color: #77613c;
              flex-basis: 10%;
              flex-grow: 1;
            }
            .headercontent {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              background-color: green;
              min-height: 20px;
            }
            .navstyle {
              list-style-type: none;
            }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
        &lt;head&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;header&gt;
            &lt;div class="headercontent"&gt;
              &lt;h1&gt;This is the header&lt;/h1&gt;
          &lt;/div&gt;
          &lt;/header&gt;
          &lt;nav&gt;
            &lt;ul&gt;
              &lt;li&gt;section1&lt;/li&gt;
              &lt;li&gt;section2&lt;/li&gt;
              &lt;li&gt;section3&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;main&gt;
            &lt;p&gt; this is the main body&lt;/p&gt;
          &lt;/main&gt;
          &lt;footer&gt;
            &lt;p&gt; this is the footer &lt;/p&gt;
          &lt;/footer&gt;
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is the codeine link to my work <a href="https://codepen.io/knows_not_much/pen/rNxXoOM" rel="nofollow noreferrer">https://codepen.io/knows_not_much/pen/rNxXoOM</a></p>