javascript - React JS -> Why does my div ignore the elements I'm mapping over?

Question

So I've created a div and inside of that div I am mapping over some lements that are contained within my wishlist. I want that div to have borders all around the elements I've mapped over but instead it, apparently, stays empty even tho I don't think it should be. Here is the relevant code:

            <div className='wishlistWrapper'>
                {productsInWishList.map(product=>    
                    <div className='productsWishListWrapper'>
                        <p className='productName'> <strong>{product.name}</strong>
                            <span>
                                <BsX className='removeProduct' size={25} 
                                      onClick= {()=>removeFromWishList(product)}/>
                            </span>
                        </p>
                        <img className='productImage' src={product.image}/>
                        <p className='productPrice'> <strong>{product.price}</strong> </p>
                    </div>)}
            </div>

Answer 1

I've fixed the problem, so basically I had display: inline-block and float: left at the same time-> removing the float: left and changing the display to display:inline-flexbox solved everything