Why flexbox in column and wrap is broken

Question

My code is

<div id="parent">
   <div class="produit_sup">
      <p>Aubergine</p>
      <p>Betterave</p>
      <p>Courgette</p>
      <p>Oignon</p>
      <p>Poireau</p>
      <p>Pomme de terre</p>
      <p>Tomate</p>
   </div>
</div>

<style>
#parent{
   display: flex;
}
.produit_sup{
   max-height: 100px;
   background: #c3c3ff;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
}
.produit_sup>p{
   width: 100px;
   text-align: left;
   margin: 0 20px 0 0;
}
</style>

Why it's look like that

And not like that

I want to save display:flex; of parent and I my number of <p> items can be changing on the time

Answer 1

Try to add to .produit_sup some flex-basis or width, like width:50%.

<div id="parent">
   <div class="produit_sup">
      <p>Aubergine</p>
      <p>Betterave</p>
      <p>Courgette</p>
      <p>Oignon</p>
      <p>Poireau</p>
      <p>Pomme de terre</p>
      <p>Tomate</p>
   </div>
</div>

<style>
#parent{
   display: flex;
}
.produit_sup{
   width: 50%;
   max-height: 100px;
   background: #c3c3ff;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
}
.produit_sup>p{
   width: 100px;
   margin: 0 20px 0 0;
}
</style>

Answer 2

You can do one of the following:

1. Remove flex from your #parent
2. Set #parent's direction to column
3. Set an alternate width to #parent, such as 100% or 200px.

<div id="parent">
   <div class="produit_sup">
      <p>Aubergine</p>
      <p>Betterave</p>
      <p>Courgette</p>
      <p>Oignon</p>
      <p>Poireau</p>
      <p>Pomme de terre</p>
      <p>Tomate</p>
   </div>
</div>

<style>
#parent{
   display: flex;
   flex-direction: column;
   width: 200px;
}
.produit_sup{
   max-height: 100px;
   background: #c3c3ff;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
}
.produit_sup>p{
   width: 100px;
   text-align: left;
   margin: 0 20px 0 0;
}
</style>