不需要的水平滾動

Question

我有一個非常簡單的問題，但我無法解決它。

另一個div內有一個div。內部div完全脫離外部div（左側：100％）。而且，外部div應該垂直滾動。但是，我無法找到如何不水平滾動，以及如何使內部div在外部div之外同時可見。

的代碼如下：

HTML：

<div id="out"> 
    <div id="in"> 
    </div> 
</div> 

CSS：

#out{ 
    height:100px; 
    width:100px; 
    background-color: green; 
    position: relative; 
    overflow-y: scroll; 
    overflow-x: visible; 
} 

#in{ 
    position: absolute; 
    left: 100%; 
    height:50px; 
    width:50px; 
    background-color: red; 
} 

提前感謝！

Answer 1

.main_outer{ 
 
    overflow-y:scroll; 
 
    border:thin black solid; 
 
overflow-x:hidden; 
 
} 
 

 
#out{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 

 
#in{ 
 
    position: absolute; 
 
    left:100%; 
 
    width:70px; 
 
    height:auto; 
 
    background-color: red; 
 
    right:0; 
 
}

<div class="main_outer"> 
 
<div id="out"> 
 
<div id="in"> 
 
    Your Inner Contents 
 
    Your Inner Contents 
 
    Your Inner Contents 
 
    
 
    </div> 
 
    </div> 
 
</div>

這裏是JSFiddle

PS：改變你的紅格大小以適合你的內容。

希望這會有所幫助。

Answer 2

固定的滾動與移除overflow-x:hidden;

================最新變化================= =====

如果這是需要的，但在標記中稍作調整，請參閱最新更改。

#outer-div { 
 
    overflow-y: scroll; 
 
    width: 165px;  
 
} 
 
#out{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 

 
#in{ 
 
    position: absolute; 
 
    left: 100%; 
 
    height:50px; 
 
    width:50px; 
 
    background-color: red; 
 
}

<div id="outer-div"> 
 
    <div id="out"> 
 
    <div id="in"> 
 
    </div> 
 
    </div> 
 
</div>