Flex box align-content doesn't leave space between items
<p>I referred the material about flexbox <code>align-content</code> in these two places, <a href="https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items">stack overflow</a> and <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer">css-tricks</a>.</p>

<p>And i tried to place three horizontal bars of different colors with 100% height and equal amount of spacing between them. </p>

<p>For the flex container, i set <code>align-content</code> as <code>space-between</code>. But still, all stripes are closely packed with no space between.</p>

<p>How can i force the empty space below the stripes to be distributed in-between &amp; around equally?</p>

<p>Plunker code is <a href="https://plnkr.co/edit/Bs5BA5e6lPhLMoLJhlr1?p=preview" rel="nofollow noreferrer">here</a>.</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-html lang-html prettyprint-override"><code>&lt;body style="height:100%;"&gt;
  &lt;div style="display:flex;height:100%;background-color:#cccccc;flex-direction:column;align-content:space-between;"&gt;
    &lt;div style="height:100px;background-color:#222222;width:100%;"&gt;
    &lt;/div&gt;
    &lt;div style="height:100px;background-color:#777777; width:100%;"&gt;
    &lt;/div&gt;
    &lt;div style="height:100px;background-color:pink; width:100%;"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>