Overflow-y：scroll with overflow-x：visible

Question

垂直スクロール可能リストからアイテムがオーバーフローする可能性はありますか？

私はここにcodepen例があります。例では

http://codepen.io/baskuipers/pen/GqQYRJ

var $item = $('#1'), 
 
    $button = $('.button'); 
 

 
$button.on("click", function() { 
 
    $item.toggleClass('addMargin'); 
 
});

.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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidenav"> 
 
    <button class="button">test</button> 
 
    <div class="item"> 
 
    <div id="1" class="sub-item"></div> 
 
    <div class="sub-item"></div> 
 
    <div class="sub-item"></div> 
 
    <div class="sub-item"></div> 
 
    <div class="sub-item"></div> 
 
    </div> 
 
</div>

を私は黄色の項目がリストの外に固執したいのですが。 スクロールバーの表示に関する問題はありません。

提案がありますか？ CSS/JavaScript？

ありがとうございます！

Answer 1

https://stackoverflow.com/a/6433475/4386196を読んだあとは、答えはノーと思われます。 overflow-x: visibleを設定する必要がありますが、overflow-yを設定しているため、コンテンツを非表示にするautoとして扱われます。

これはおそらく、まさにあなたの問題を解決していませんが、あなたは追加した場合：

margin-right: -100px; padding-right: 100px;

.itemに、あなたは、スクロールバーを移動し、ボックス内のオーバーフローのためのより多くの部屋を与えることができます。一番近い私は解決策に出ることができました。