title: How can I prevent scrollbar from appearing on top of modal background
body: <p>I'm placing a fixed position modal inside a relatively positioned element with no transforms and with overflow: auto.</p>
  
  <p>The problem is that when there is overflow on the parent, the modal's backdrop does not cover the scrollbars - please look at the picture attached for an example.</p>
  
  <p><a href="https://i.stack.imgur.com/I6sg3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I6sg3.png" alt="enter image description here"></a></p>
  
  <p>The scrollbar should also be covered by the semi-transparent black backdrop, but for some reason it is not. Does anyone know why, and/or how I may go about fixing this? </p>
  
  <p>I want to avoid using absolute positioning for the modal container because it can be a nested element in any arbitrary hierarchy.</p>
  
  <p>Here is my css for the .modal-container class which includes the backdrop.</p>
  
  <pre><code>.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  opacity: 1;
  transition: all .1s;
  display: flex;
  z-index: 200;
  justify-content: center;
  align-items: center;}
  </code></pre>