title: Entire page scrolling when I only want one section to scroll
body: <p>I'm trying to create a section where only one div will scroll not the whole page</p>
  <p>like if the user hovers on the product images section then the product details section will stick</p>
  <p>I don't want to show all product images to users on scroll only if hover on the product section</p>
  <p>it's like images are scrolling on a div only</p>
  <p>Codepen:<a href="https://codepen.io/taruunn/pen/MWONvdr" rel="nofollow noreferrer">https://codepen.io/taruunn/pen/MWONvdr</a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .productWrapper{
        display:flex;
    
          max-width:1440px;
        margin:0 auto
      }
      .product_images{
        display:flex;
        flex-direction:column;
         width: 100%;
          flex: 1 1 50%;
        
      }
      .product_images img{
        margin-top:25px
      }
      .product_details{
        padding:0 25px;
            width: 100%;
          flex: 1 1 40%;
      }
      .product_images:hover +.product_details .product_sticky  {
          position: sticky;
          top: 0;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="productWrapper"&gt;
  &lt;div class="product_images"&gt;
      &lt;img src="https://via.placeholder.com/400x600?text=product-image"&gt;
      &lt;img src="https://via.placeholder.com/400x600?text=product-image"&gt;
      &lt;img src="https://via.placeholder.com/400x600?text=product-image"&gt;
      &lt;img src="https://via.placeholder.com/400x600?text=product-image"&gt;
      &lt;img src="https://via.placeholder.com/400x600?text=product-image"&gt;
      &lt;img src="https://via.placeholder.com/600x900?text=product-image"&gt;
      
  &lt;/div&gt;
  &lt;div class="product_details"&gt;
    &lt;div class="product_sticky"&gt;
      &lt;h2&gt;product title &lt;/h2&gt;
      &lt;h4&gt;Price&lt;/h4&gt;
    &lt;p&gt;Product description Product descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct descriptionProduct description &lt;/p&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>