Problème Flex Wrap Colonne -> Width Parent

Lorsque j'applique un flex-wrap : wrap avec pour direction flex-direction : column : Le résultat que j'obtien ne me convient pas car le conteneur avec pour class "flex" ne prend pas la largeur totale de ses enfants donc des deux colonnes mais ne prend la largeur d'une colonne d'enfant. Mon container "no_flex" se superposse sur mon container 3. Je souhaiterai que mon container avec la class "flex" prenne en largeur la largeur des deux colonnes des enfants. afin que le bloc "no_flex" se place bien à la suite de mon bloc "flex"

<div class='wrapper'>
  <div class="flex">
    <div class="conteneur conteneur_1">Conteneur 1</div>
    <div class="conteneur conteneur_2">Conteneur 2</div>
    <div class="conteneur conteneur_3">Conteneur 3</div>
  </div>
  <div class="no_flex">
    <div class="conteneur conteneur_4">Conteneur 4</div>
  </div>
</div>

.conteneur {
  width: 200px;
  height: 250px;
}

.conteneur_1 {
  background-color : orange;
}

.conteneur_2 {
  background-color: blue;
}

.conteneur_3 {
  background-color : green;
}

.conteneur_4 {
  color: red;
}

.flex {
  display : flex;
  flex-direction: column;
  max-height: 500px;
  flex-wrap: wrap;
}

.wrapper {
  display: flex;
}