flexboxStretch

flex only the third div. do not flex any of its contents

HTML

<div class="flex-container">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
  <div class="flex-item3"></div>
</div>

CSS

* {
  margin: 0;
}

.flex-container {
  display: flex;
  height: 300px;
  flex-wrap: wrap;
  border: 1px solid blue;
  background-color: gray;
  align-content: flex-start;
}

.flex-item1 {
  width: 100%;
  height: 10px;
  background: yellow;
}

.flex-item2 {
  width: 100%;
  height: 10px;
  border: 1px solid red;
  background: red;
}

.flex-item3 {
  width: 100%;
  border: 3px solid purple;
  background: purple;
  align-self: stretch;
  height: auto;
}

/* another attempt for the third child div */
/* .flex-item3 {
  width: 100%;
  border: 3px solid purple;
  background: purple;
  flex-direction:row;
  flex-grow: 1;
} */