html - 为什么 column 和 wrap 中的 flexbox 坏了

Question

<分区>

Answer 1

尝试向 .produit_sup 添加一些 flex-basis 或 width，例如 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>