不需要的水平滚动

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>