Why flex items are not stretching with align items and with align content

First Edit: if i use align-items: stretch; 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, align-items: stretch value, stretching the flex items.

Second edit : 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.

I already read this answer Flex item not filling screen height with "align-items: stretch"

But my problem is different, as soon as I add align-items, flex-items stop stretching, before adding this property they work fine, I know I can solve this problem by adding height to 100%, but I am not interested in that, I want to know why it's behaving this way. Note: I am using chrome

My code please read the comment, in the 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
}

<div class="container">
  <div class="box box1">Home</div>
  <div class="box box2">Menu</div>
  <div class="box box3">About Us</div>
  <div class="box box4">Contact Us</div>
</div>