Cart modal overlay sticks to the top When it has mutiple items

Question

I created cart modal, when i add multiple items to it, the style looks weird because the firs item cant see in the modal. probably i have some style issue. i am gonna share the code of my modal and styles. The screenshot i took probably has 4 product but shows three

<div onClick={this.props.onClick}  className={modalStyles.darkBg}/>
        <div className={modalStyles.centered}>
          <div className={modalStyles.modal}>
            <p className={modalStyles.heading}>
              My bags, {this.props.cart.length} items
            </p>
            {this.props.cart.map((item, index) => (
              <div className={modalStyles.modalBody} key={item.id}>
                <div className={modalStyles.row1}>
                  <div className={modalStyles.row2Child}>
                    <button type="button"onClick={()=> {this.props.addToCartWithQty(item)}}>+
                    </button>
                    <p>{item.qty}</p>
                    <button type="button" onClick={()=> {this.props.removeFromCart(index)}}>-
                    </button>
                  </div>
                  <img src={item.gallery[0]} alt="Avatar"/>
                </div>
              </div>
            ))}
          </div>
        </div>

Styles:

.darkBg {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100vw;
  height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
}

.centered {
  position: absolute;
  top: 35%;
  right: 0;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.modal {
  width: 350px;
  height: auto;
  background: white;
  color: white;
  z-index: 10;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
}
  
.heading {
  margin: 0;
  padding: 10px;
  color: #2c3e50;
  font-weight: 500;
  font-size: 18px;
  text-align: left;
}

.modalBody {
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-size: 14px;
  color: #2c3e50;
  gap: 10px;
}

Answer 1

On .modal class You need to add max-height instead of height and overflow-y should be set to scroll to be able to scroll not visible elements.

max-height: 80vh;
overflow-y: scroll;