Horizontal scrollbar appears with overflow content on right but not on left?
<p>I have an element with <code>position: absolute</code> in <code>body</code> with some part of it <em>to the left</em> from left side.</p>
<p><a href="https://jsfiddle.net/blr_Oliver/wq73u9jn/" rel="nofollow noreferrer">Demo fiddle</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  overflow: visible;
}

#test {
  position: absolute;
  height: 100px;
  width: 100px;
  left: -50px;
  background-color: lime;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>I expect that horizontal scrollbar should appear allowing to scroll the document to the hidden part of the element, but it doesn't. So, I have some questions about the case:</p>
<ol>
<li>Why it happens so, why scrollbar doesn't appear (it works fine with symmetric layout on the right side)?</li>
<li>Is it ever possible to make it appear and <strong>scroll to the left</strong> ?</li>
<li>Am I missing anything very basic about scrollbars?</li>
</ol>