Why Does Flex Container Grow After Certain Number Flex Items Added? - html

Question

I'm using FlexBox to create a basic Purchase Form, the simplified code is in the below CodePen.
The Code Pen
The Flex Item in question are those with:
class="purchase_body_checkout_form_selectable-product"
When I was testing it in my actual Project (with other items on the page), the results didn't happen until the 7th Flex Item was added, in the Code Pen you can see what I'm talking about after adding the 4th Flex Item.
You'll need to uncomment out the section of HTML I've commented out in the CodePen, there's 3 sections, each with some commentary.
What I'm talking about is that the Flex Container grows once I add the 4th or more Flex Item.
It grows even more after the 5th Flex Item, and continues to for the next few.
This DOES NOT happen when I use Grid, so I assume it has to do with Flex's "self-growth" nature.
I don't understand why this is.
When I tested this in my Development Environment, the Container remained the same size until the 7th Flex Item was added.
There was no difference between Items, I used React, each new Item is an exact replica of the others (I literally duplicated the React Element).
It currently doesn't make sense why the Container will grow after basically repeating what I did for the first Row, without any need to grow.
If the first Row was sized just fine, with 2 Flex Items (again, each Flex Item is coded the exact same from HTML to CSS), then why does the addition of another Row cause the Container to grow?
The second Row should have the same size requirements as the first Row... Right?
That is the confusion I wish to clear up. Any thoughts that could explain this behavior?
My guess is something to do with the Container of the Checkout AND Summary sections of the Purchase Form. Since I have "justify-content: space-between", and something about the 4th Flex Item requires slightly more space, that causes the (Checkout) Container to expand more (since it has that space, via the "space-between" gap being fairly large.
I'm still fairly new to Flex Box, so please try to address any assumptions or ignorances you notices in my explanation above.
Thank you! (:
In summary:
Tried adding Flex Items to Flex Container, expected after the first Row, the size requirements would be the same for the second Row (each Flex Item is identical), but yet, the second Row causes the Flex Container to grow in size.
Here's the CSS (Code Pen has it in a cleaner format):
`
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 25%;
gap: 100px;
background-color: gray;
}
.purple-blue { background-color: #5100FF }
.purchase_body_checkout_container {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
align-items: flex-start;
gap: 25px;
}
.purchase_body_checkout_form,
.purchase_body_checkout_order-summary {
padding: 12px;
border-radius: 12px;
background-color: white;
}
.purchase_body_checkout_form_product-selection {
display: flex;
flex-wrap: wrap;
}
.purchase_body_checkout_form_selectable-product {
position: relative;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 50%;
max-width: 50%;
overflow: hidden;
}
`
Basic HTML Structure is the following (see CodePen for the Comments I mentioned above to add the 4th+ Flex Item to see the Container grow)
This only has a single Flex Item, to keep it concise (CodePen has the rest):
<div class="purchase_body_checkout_container">
<div class="purchase_body_checkout_form">
<h2 class="purchase_body_checkout_form_header">Checkout</h2>
<div class="purchase_body_checkout_form_product-selection">
<div class="purchase_body_checkout_form_selectable-product">
<input type="checkbox" class="purchase_body_checkout_form_selectable-product_checkbox" />
<h3 class="purchase_body_product_name purple-blue">TEST ONE</h3>
</div>
</div>
</div>
<div class="purchase_body_checkout_order-summary">
<h2 class="purchase_body_checkout_order-summary_header">Order Summary</h2>
</div>
</div>

Answer 1

As you can see from this screenshot, the .purchase_body_checkout_form is not already taking up its width potential, which is indicated by the shaded purple. This means with flex this container can grow and will grow into the space when the viewport expands.
The reverse is also true. You will notice if you shrink your codepen down to a mobile device the container has the desired spacing. I suggest putting a max-width on .purchase_body_checkout_form.
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 25%;
gap: 100px;
background-color: gray;
}
.purple-blue {
background-color: #5100FF
}
.purchase_body_checkout_container {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
align-items: flex-start;
gap: 25px;
}
.purchase_body_checkout_form,
.purchase_body_checkout_order-summary {
padding: 12px;
max-width: 280px;
border-radius: 12px;
background-color: white;
}
.purchase_body_checkout_form_product-selection {
display: flex;
flex-wrap: wrap;
}
.purchase_body_checkout_form_selectable-product {
position: relative;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 50%;
max-width: 50%;
overflow: hidden;
}
<div class="purchase_body_checkout_container">
<div class="purchase_body_checkout_form">
<h2 class="purchase_body_checkout_form_header">Checkout</h2>
<div class="purchase_body_checkout_form_product-selection">
<div class="purchase_body_checkout_form_selectable-product">
<input type="checkbox" class="purchase_body_checkout_form_selectable-product_checkbox" />
<h3 class="purchase_body_product_name purple-blue">TEST ONE</h3>
</div>
<div class="purchase_body_checkout_form_selectable-product">
<input type="checkbox" class="purchase_body_checkout_form_selectable-product_checkbox" />
<h3 class="purchase_body_product_name purple-blue">TEST ONE</h3>
</div>
<div class="purchase_body_checkout_form_selectable-product">
<input type="checkbox" class="purchase_body_checkout_form_selectable-product_checkbox" />
<h3 class="purchase_body_product_name purple-blue">TEST ONE</h3>
</div>
<div class="purchase_body_checkout_form_selectable-product">
<input type="checkbox" class="purchase_body_checkout_form_selectable-product_checkbox" />
<h3 class="purchase_body_product_name purple-blue">TEST ONE</h3>
</div>
<div class="purchase_body_checkout_form_selectable-product">
<input type="checkbox" class="purchase_body_checkout_form_selectable-product_checkbox" />
<h3 class="purchase_body_product_name purple-blue">TEST ONE</h3>
</div>
<div class="purchase_body_checkout_form_selectable-product">
<input type="checkbox" class="purchase_body_checkout_form_selectable-product_checkbox" />
<h3 class="purchase_body_product_name purple-blue">TEST ONE</h3>
</div>
</div>
</div>
<div class="purchase_body_checkout_order-summary">
<h2 class="purchase_body_checkout_order-summary_header">Order Summary</h2>
</div>
</div>