Why flexbox in column and wrap is broken

user_13937777 0
Viewed 75

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
My result

And not like that
What I want

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

flexbox css html
2 Answers

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>

user_137812080

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>

user_2801430
Related