Défilement horizontal indésirable

Question

J'ai un problème très simple, mais je ne peux pas le résoudre.

Il y a un div à l'intérieur d'un autre div. Le div interne est positionné complètement hors de la div externe (à gauche: 100%). De plus, la div externe doit défiler verticalement. Cependant, je ne peux pas trouver comment ne pas faire défiler horizontalement et comment rendre la div intérieure visible en dehors de la div extérieure, en même temps.

Le code est le suivant:

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; 
} 

Merci à l'avance!

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>

Voici JSFiddle

PS: Changer votre taille rouge div pour répondre à vos contenus.

Espérons que cela aide.

Answer 2

Correction du défilement avec la suppression du overflow-x:hidden;

================ dernier changement ================= =====

Voir le dernier changement si c'est ce qui est requis, mais un petit tweak dans le balisage.

#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>