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

Question

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>

Answer 1

Your box items can't both stretch and center at the same time.

Combining align-items and align-content won't make that happen as align-items applies on flex items on a single row and align-content when they wrap.

Note, you don't need to add align-items/content and set their value to stretch, it is their default

---

As for a solution, setting the box to height: 100% will make them look stretched, though will give a completely different result compared to make use of the align-items/content's stretch value.

With a fixed height they will be that set height, no matter if there will be 2 or more rows, with stretch whey will adjust their height to fit their parent. Simply put, 2 rows will make them 50% high, 3 rows 33.33% high and so on.

---

Assuming it is the text in the box you want centered, along with the box to stretch, simply make the box a flex container too.

Add display: flex; align-items: center to the box and it likely will layout the way you want.

If you want the text to also center horizontally, I here added justify-content: center;, which you can either keep or remove.

.container {
  font-size: 36px;
  height: 800px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 400px;
  color: #fff;
  display: flex;
  align-items: center;             /*  vertically center    */
  justify-content: center;         /*  horizontally center  */
}

.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>