title: Blur effect fixed to right edge of div with overflow-x:scroll content
body: <p>I'm want to create a blur over the right edge of visible content of a div with overflow-x:scroll</p>
  
  <p><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>.scroll {
    display:flex;
    overflow-x:scroll;
    position:relative;
    
  }
  
  .scroll div {
    margin:10px;
  }
  
  img {
    width: 200px;
  }
  .overlay {
    position: fixed;
    background : transparent;
    background-image: linear-gradient(to right, rgba(29, 33, 47, 0), #1d212f);
    top: 0;
    right: 0;
    width:100px;
    height:304px;
    filter: blur(2px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Some Content Above
      &lt;div class="scroll"&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="https://images.unsplash.com/photo-1566321925839-ee26bd257e1b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80"/&gt;&lt;/div&gt;
     &lt;div class="overlay"&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/k31of5ms/28/" rel="nofollow noreferrer">JS Fiddle</a></p>
  
  <p>As you can see in the JS fiddle, the dark blur overlay shows on the right side of scroll images div (hover below images to see scroller), but not in the correct height above div. </p>
  
  <p>I didn't find a way to set the overlay to be exactly above div. </p>
  
  <p>I can't solve this with setting fixed px from top/bottom because the content above and below is dynamic. </p>
  
  <p>How can I set the blur effect in the div "overlay" to be placed exactly above the right side of the div "scroll"?</p>