What causes the breakdown of flexbox when set to column and wrap?

Question

What causes the breakdown of flexbox when set to column and wrap?

Here is the code I am working with:

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

I am wondering why the layout looks like this:
https://i.sstatic.net/3yPFO.png

Instead of looking like this:
https://i.sstatic.net/7jVXo.png

I would like to maintain the display:flex; property of the parent element, and the number of <p> items may vary over time.

html css flexbox

Answer 1

Answer №1

Consider adjusting the CSS for .produit_sup by adding properties like flex-basis or width, such as width:50%.

<div id="parent">
   <div class="produit_sup">
      <p>Eggplant</p>
      <p>Beetroot</p>
      <p>Zucchini</p>
      <p>Onion</p>
      <p>Leek</p>
      <p>Potato</p>
      <p>Tomato</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

Consider adjusting the CSS for .produit_sup by adding properties like flex-basis or width, such as width:50%.

<div id="parent">
   <div class="produit_sup">
      <p>Eggplant</p>
      <p>Beetroot</p>
      <p>Zucchini</p>
      <p>Onion</p>
      <p>Leek</p>
      <p>Potato</p>
      <p>Tomato</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 3

Answer №2

Here are a few options you can try:

Remove the flex property from your CSS for #parent
Change the direction of #parent to column
Adjust the width of #parent to a different value like 100% or 200px

<div id="parent">
   <div class="product_list">
      <p>Eggplant</p>
      <p>Beetroot</p>
      <p>Zucchini</p>
      <p>Onion</p>
      <p>Leek</p>
      <p>Potato</p>
      <p>Tomato</p>
   </div>
</div>

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

Answer 4

Here are a few options you can try:

Remove the flex property from your CSS for #parent
Change the direction of #parent to column
Adjust the width of #parent to a different value like 100% or 200px

<div id="parent">
   <div class="product_list">
      <p>Eggplant</p>
      <p>Beetroot</p>
      <p>Zucchini</p>
      <p>Onion</p>
      <p>Leek</p>
      <p>Potato</p>
      <p>Tomato</p>
   </div>
</div>

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

What causes the breakdown of flexbox when set to column and wrap?

Answer №1

Answer №2

Similar questions

Issues with retrieving $_POST values from a select form in PHP

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Issue with exchanging columns in Bootstrap version 5.0

developing a PHP script that dynamically generates active classes

Is there a way to create a Swipe slideshow without relying on plugins or external tools?

Tips for positioning the search bar on the opposite side of the navbar in Bootstrap 5

Using PHP to extract data from multiple HTML arrays

A guide on restricting overflow in React Spring Parallax 'pages'

What is the best way to change the background color for my photo gallery?

Smooth animation is not being achieved with the Jquery dlmenu

Interactive Show Map with Autocompletion Feature

Is there a way for me to choose the item from the search dropdown so that it fills in the search input field automatically?

Creating a custom blockquote style for a WordPress Twenty Fifteen child theme

Display div content depending on the clicked ID in AngularJS

Icon alignment to wrapped text width has been successfully achieved with the implementation of Flexbox onto a single

The div smoothly descended from the top of the page to the center under the control of jQuery

How can I eliminate the empty spaces surrounding an image?

How can I navigate to a user profile page and access the specific data of the currently logged-in user using Django?

Is there a more optimized CSS approach for this layout?

Adjust the height for just one md-tab