title: Box-shadow still cutting off with overflow-y set to visible
body: <p>I am having the same issue as in <a href="https://stackoverflow.com/questions/12713492/box-shadow-being-cut-off">this question</a>, but I need to have <code>overflow-x</code> set to <code>scroll</code> or else the entire document will be wider than the screen.  Theoretically, setting <code>overflow-y</code> to <code>visible</code> <em>should</em> keep the box shadow visible, but it still cuts it off.  This can be seen with the code below.</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>*::-webkit-scrollbar {
    display: none;
  }
  body {
    margin: 0;
    background: #ddd;
    height: 100%;
    width: 100%;
  }
  .scroll {
    width: 100%;
    height: 60px;
    overflow-x: scroll;
    overflow-y: visible;
    white-space: nowrap;
  }
  .box {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 5px;
    background: #fff;
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div class="scroll"&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like for the drop shadow to be fully visible outside of the parent div, is this possible at all?</p>