title: Angular CDK - issue with scrolling and dragging element inside nested scrollable div
body: <p>Prerequisite: cdk draggable elements inside a nested scrollable <code>div</code>
  (see  the <a href="https://stackblitz.com/edit/angular-7y19nm?file=app/cdk-drag-drop-sorting-example.html" rel="nofollow noreferrer">example</a>)</p>
  <p>How to reproduce:</p>
  <ol>
  <li>Start dragging an item.</li>
  <li>Scroll the page</li>
  <li>Drag item a bit more when not scrolling</li>
  </ol>
  <p>Effect: item placeholder stays in wrong place and it's basically impossible to drag item anywhere outside the viewport.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div style=&quot;height: 100vh; overflow-y: auto&quot;&gt;
    &lt;div cdkDropList class=&quot;example-list&quot; (cdkDropListDropped)=&quot;drop($event)&quot;&gt;
      &lt;div class=&quot;example-box&quot; *ngFor=&quot;let movie of movies&quot; cdkDrag&gt;{{movie}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>