Flex wrap and flex basis not working using CSS? - html

Question

I am making this application, and I am using React. Here, I have many items, and I am dynamically adding them using React. Here's my code to help you understand better -
CSS:
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexContainer .item {
padding: 5px;
border: 1px solid aqua;
flex: 1 1 50%;
}
.flexContainer .item {
display: block;
width: 500px;
text-align: center;
}
* {
box-sizing: border-box;
}
React:
<div class="flexContainer">
<div key={p.id} class="item">
<div class="item">
<p className="itemTitle">{p.title}</p>
<button onClick={() => addItem(p)}>
{alreadyAdded ? "Add again" : "Add to Cart"}
</button>
</div>
</div>
</div>
Here is a snippet of my items:
{
id: 7,
price: 50,
button: (
<button
onClick={() => {
alert("This function is not ready yet!!!!");
}}
>
Click!
</button>
),
title: "Apple",
},
So, when I run my program, I get this-
My Pic
I had taken another similar code from here
As you can see, the code I had taken from the other stackoverflow is working, but mine is not working. I've used the same technique to do for mine as well but it's not working.
What I want is, 2 of the items to come in a row, with 50% of width, and so on.
Currently, it's not working.
Please help me out, it would help out a ton!
Thanks.

Answer 1

in terms of your question for that row removing some of the the code will allow this to work.
.flexContainer .item {
display: block;
width: 500px;
}
This code is not really needed unless you have other reasons for it to be in your code but doesnt really play part of your question
As you will see from this link your row works
https://jsfiddle.net/ct96dL2o/1/
so from the original code you supplied this answer will work if you need a more elaborate answer you would need to show more code.

Answer 2

change your item style width
.flexContainer .item {
width:50% !important
}

Answer 3

If you are using bootstrap then use row and inside of that and two col-6 class and also checkout link of bootstrap grid
https://getbootstrap.com/docs/5.2/layout/grid/
<div class="container">
<div class="row">
<div class="col-6">
first
</div>
<div class="col-6">
second
</div>
</div>
</div>