CSS overflow-y：visible，overflow-x：scroll

Question

我在我的搜索中看到過這樣的幾個問題，但是這個問題沒有得到正確回答，也沒有給出答案。所以，我會再問一次。

<style> 
.parent { overflow-y:scroll; overflow-x:visible; width:100px; } 
.child { position:relative; } 
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; } 
</style> 

    <div class="parent"> 
    <!-- Lots of the following divs --> 
    <div class="child"> 
    Text Line 
    <div class="child-menu">some pop out stuff</div> 
    </div> 
</div> 

好的，這只是一個例子。但基本上，我試圖完成的是.child類可以在y軸上滾動...上下滾動。但是我想要x軸....子菜單的在.parent容器之外是可見的。

這有道理嗎？所以發生的事情是，當頁面呈現時，瀏覽器將溢出解釋爲自動完成，而不是尊重單獨的軸。我做錯了什麼，或者瀏覽器還沒有達到CSS3規範呢？大多隻在Chrome上進行測試。

Answer 1

我想通了！

父應該溢出：auto; .child應該是position：relative; .child-menu應該是position：fixed;與無頂部或左側定位。 如果你這樣做，它會保持它與內容的內聯。

如果您需要移動子菜單的使用邊距而不是頂部或左側。示例margin-left：-100px;

Answer 2

它解決了！ 他們使用CSS和JS。

.child:hover .child-menu { display: block; } 

.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px } 
    .child { position:static; } 
    .child-menu { position:absolute; display:inline-block; display: none; } 

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/