I am currently working on a React project and encountered an issue with the CSS styling. I am looking for a solution that allows me to keep the parent and child components the same while enabling a scroll effect on the left side of the div containing shopping items. I have tried using overflow-y: scroll, but it only creates a scroll bar without making the content scrollable, even when I set a specific height. I am aware of another method that accomplishes this, but unfortunately, I am unable to locate it at the moment.
https://i.sstatic.net/8EhdL.png
The parent HTML code:
const CartModal = () => {
const { totalPrice, totalAmount } = useSelector((state) => state.cart);
return (
<div className={classes["cart-modal"]}>
<div className={classes["cart-modal__navbar"]}></div>
<div className={classes["cart-modal__body"]}>
<div className={classes["body__left-side"]}>
<h1>ORDERS</h1>
<CartModalFoodList />
</div>
<div className={classes["body__right-side"]}>
<div>
<img src={BigCart} />
</div>
<div>
<h2>Total price:</h2>
<h2>{totalPrice}$</h2>
</div>
<div>
<h2>Total amount:</h2>
<h2>{totalAmount}</h2>
</div>
</div>
</div>
</div>
);
};
Thank you.