望ましくない水平スクロール

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は次のとおりです。あなたの内容に合わせて赤のdivのサイズを変更します。

これが役に立ちます。

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>