title: Why is align-self: stretch not working on a flex item?
body: <p>I am trying to stretch the <code>.side-bar</code> div so that it takes up the height of the entire window.</p>
  
  <p>I added flex to the flex container and specified the flex item widths and heights but the side-bar's height is displaying the same as the flex items.</p>
  
  <p>Is it because of the order of my CSS classes? </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>* {
    margin: 0;
  }
  
  .flex-container {
    display: flex;
    height: 500px;
    border: 1px solid blue;
  }
  
  .flex-items {
    width: 100px;
    height: 250px;
    border: 1px solid red;
  }
  
  .side-bar {
    width: 400px;
    align-self: stretch;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-items side-bar"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
    &lt;div class="flex-items"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>