make specific flex item stretch - html

Question

How can make child-6 is stretch to half the height of parent?
avoiding the way of splitting 6 items into 2 groups.
I want to stretch child-6 but not working and this makes sense to me because to make a specific item stretch will be stretched the rest space, not half.
.parent {
width: 600px;
margin: 0 auto;
padding: 10px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
align-content: space-between;
}
.parent div {
color: #eee;
background-color: rgb(29, 28, 27);
padding: 10px 0;
width: calc(94%/3);
display: flex;
justify-content: center;
}
.parent div.ch6 {
align-self: stretch;
}
<div class="parent">
<div class="ch1">1</div>
<div class="ch2">2</div>
<div class="ch3">3</div>
<div class="ch4">4</div>
<div class="ch5">5</div>
<div class="ch6">6</div>
</div>

Answer 1

Like below:
.parent {
width: 600px;
margin: 0 auto;
padding: 10px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
/*align-content: space-between; removed */
}
.parent div {
color: #eee;
background-color: rgb(29, 28, 27);
padding: 10px 0;
width: calc(94%/3);
display: flex;
justify-content: center;
}
.parent div.ch6 {
align-self: stretch;
}
.parent div.ch5,
.parent div.ch4{
align-self: end; /* added */
}
<div class="parent">
<div class="ch1">1</div>
<div class="ch2">2</div>
<div class="ch3">3</div>
<div class="ch4">4</div>
<div class="ch5">5</div>
<div class="ch6">6</div>
</div>