title: How to scroll the page when a modal dialog is longer than the screen?
body: <p>I have a modal dialog in my app which can get quite long in the y direction. This introduces a problem whereby some of the content of the dialog is hidden off the bottom of the page.</p>
  
  <p><img src="https://i.stack.imgur.com/qbgot.png" alt="enter image description here"></p>
  
  <p>I would like the window scrollbar to scroll the dialog when it is displayed and too long to fit on the screen but leave the main body in place behind the modal. If you use <a href="http://trello.com" rel="noreferrer">Trello</a> then you know what I'm going for.</p>
  
  <p>Is this possible without using JavaScript to control the scrollbar?</p>
  
  <p>Here is the CSS I have applied to my modal and dialog so far:</p>
  
  <pre><code>body.blocked {
    overflow: hidden;
  }
  
  .modal-screen {
    background: #717174;
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    z-index: 50;
  }
  
  .dialog {
    background: #fff;
    position: fixed;
    padding: 12px;
    top: 20%;
    left: 50%;
    z-index: 10000;
    border-radius: 5px;
    box-shadow: 0, 0, 8px, #111;
  }
  </code></pre>