title: Why flex items are not stretching with align items and with align content
body: <p><strong>First Edit:</strong> if i use <code>align-items: stretch;</code> I am able to stretch my flex items, I don't know what to make of it, but I was playing around with it, and thought I should add this info as edit as well, <code>align-items: stretch</code> value, stretching the flex items.</p>
  
  <p><strong>Second edit :</strong> Ok may be i am not clear, i am not looking for solution, i just want to know why it's not streching with justify-content, that's it, i can solve this problem my self, by editing the code, but i want to know the reason, why it is acting the way its acting. </p>
  
  <p>I already read this answer <a href="https://stackoverflow.com/questions/36213092/flex-item-not-filling-screen-height-with-align-items-stretch">Flex item not filling screen height with &quot;align-items: stretch&quot;</a></p>
  
  <p>But my problem is different, as soon as I add <code>align-items</code>, flex-items stop stretching, before adding this property they work fine, I know I can solve this problem by adding height to <code>100%</code>, but I am not interested in that, I want to know why it's behaving this way.
  <strong>Note:</strong> I am using chrome</p>
  
  <p><strong>My code please read the comment, in the code</strong></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>.container {
    font-size: 36px;
    height: 800px;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* as soon as i add this align-items property or my items 
    stop streching, i don't get it, if use value stretch it streches 
    the my items, please read the note first edit in the question, 
    it is at the top */
    align-content: stretch;
  }
  
  .box {
    width: 400px;
    color: #fff;
  }
  
  .box1 {
    background: blue;
  }
  
  .box2 {
    background: red
  }
  
  .box3 {
    background: yellow
  }
  
  .box4 {
    background: black
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="box box1"&gt;Home&lt;/div&gt;
    &lt;div class="box box2"&gt;Menu&lt;/div&gt;
    &lt;div class="box box3"&gt;About Us&lt;/div&gt;
    &lt;div class="box box4"&gt;Contact Us&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>