title: How to add overflow y to specific div only
body: <p>I have a sidebar where a list of the recipe is available but the list will be long enough that the user will need to scroll down. Now what I want to achieve is to add vertical scroll only to that sidebar not to the whole page. So when a user scrolls down only that sidebar scrolls, not the whole page.</p>
  
  <p>I tried to disabled overflow-y (hidden) of the whole page and only added overflow-y to scroll to that sidebar but when I increase the list, it doesn't work. If I remove overflow-y (hidden) from HTML and body tag and try again, I get a scroll bar to the whole page.</p>
  
  <pre><code>.recipe-list {
          list-style-type: none;
          width: 100%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          margin: 1rem 0;
          overflow-y: scroll;
      }
  </code></pre>
  
  <p>NOTE: I am using CSS GRIDs.</p>
  
  <p>Here is my result </p>
  
  <p>Normal : 
  <img src="https://i.imgur.com/NlWYpqk.png" alt="Normal" title="tooltip"></p>
  
  <p>Increasing List</p>
  
  <p><img src="https://i.imgur.com/Wj99KRe.png" alt="Adding Content" title="tooltip"></p>