make specific flex item stretch-CodePudding

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 >
     <div >1</div>
     <div >2</div>
     <div >3</div>
     <div >4</div>
     <div >5</div>
     <div >6</div>
</div>

CodePudding user response：

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 >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
</div>