title: Cart modal overlay sticks to the top When it has mutiple items
body: <p>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</p>
  <pre><code>&lt;div onClick={this.props.onClick}  className={modalStyles.darkBg}/&gt;
          &lt;div className={modalStyles.centered}&gt;
            &lt;div className={modalStyles.modal}&gt;
              &lt;p className={modalStyles.heading}&gt;
                My bags, {this.props.cart.length} items
              &lt;/p&gt;
              {this.props.cart.map((item, index) =&gt; (
                &lt;div className={modalStyles.modalBody} key={item.id}&gt;
                  &lt;div className={modalStyles.row1}&gt;
                    &lt;div className={modalStyles.row2Child}&gt;
                      &lt;button type=&quot;button&quot;onClick={()=&gt; {this.props.addToCartWithQty(item)}}&gt;+
                      &lt;/button&gt;
                      &lt;p&gt;{item.qty}&lt;/p&gt;
                      &lt;button type=&quot;button&quot; onClick={()=&gt; {this.props.removeFromCart(index)}}&gt;-
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;img src={item.gallery[0]} alt=&quot;Avatar&quot;/&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              ))}
            &lt;/div&gt;
          &lt;/div&gt;
  
  </code></pre>
  <p>Styles:</p>
  <pre><code>.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;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/jhyhJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jhyhJ.png" alt="enter image description here" /></a></p>