Overflow-y: scroll with overflow-x: visible
<p>Is it possible to have an item overflow horizontally out of a vertically scroll-able list?</p>

<p>I have a codepen example here:</p>

<p><a href="http://codepen.io/baskuipers/pen/GqQYRJ" rel="nofollow">http://codepen.io/baskuipers/pen/GqQYRJ</a></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-js lang-js prettyprint-override"><code>var $item = $('#1'),
  $button = $('.button');

$button.on("click", function() {
  $item.toggleClass('addMargin');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.sidenav {
  width: 300px;
  background-color: grey;
  position: fixed;
  padding: 20px;
}
.addMargin {
  margin-left: 60px;
}
.item {
  width: 100%;
  overflow-y: auto;
  height: 100vh;
  z-index: 5;
  position: relative;
}
.sub-item {
  transition: margin-left 1s cubic-bezier(0.36, -0.48, 0, 2.22);
  background-color: orange;
  height: 100px;
  width: 100%;
  margin-bottom: 10px;
  z-index: 10;
  position: relative;
}
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="sidenav"&gt;
  &lt;button class="button"&gt;test&lt;/button&gt;
  &lt;div class="item"&gt;
    &lt;div id="1" class="sub-item"&gt;&lt;/div&gt;
    &lt;div class="sub-item"&gt;&lt;/div&gt;
    &lt;div class="sub-item"&gt;&lt;/div&gt;
    &lt;div class="sub-item"&gt;&lt;/div&gt;
    &lt;div class="sub-item"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>In the example I'd like to have the yellow item stick out of the list.
It is not a problem about the visibility of the scrollbars.</p>

<p>Any suggestions? CSS / JavaScript?</p>

<p>Thanks!</p>