Нежелательная горизонтальная прокрутка

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

Fixed свиток с удалением 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>