不需要的水平滚动

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

通过删除 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>

Answer 2

.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: 更改红色 div 大小以适合您的内容。

希望对您有所帮助。

不需要的水平滚动

Unwanted horizontal scroll

html

css

scroll