Overlfow ile iki div kullanma: hidden overflow-y: kaydırma beklendiği gibi çalışmıyor

Question

İçeriği kaydırma çubuğu görünmeden yapmak için iki iç içe geçmiş öğenin numarasını kullanıyorum.

ne demek göstermek için:

<div class="outer"> 
    <div class="inner"> 
    //content here 
    </div> 
</div> 

içerik dış div daha yüksektir, bu yüzden ilerlemek istiyorum. Ancak görünür bir kaydırma çubuğu istemiyorum. Bu yüzden şu CSS'yi ayarlayın:

Ancak bu durum oldukça garip davranmaktadır. Bir ölçüde çalışır - içerik hafifçe kaydırılır. Ancak görünür olması gerektiği kadar kaydırmaz ve içteki div, dış divdaki dolguyu görmezden gelir.

Bu benim tam CSS'm. İlgili bit .section ve .innerSection olan

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} 

html, body { 
    background-color: #330033; 
    height: 100%; 
    width: 100%;  
    color: #FFFFCC; 
    font-family: 'Andika', sans-serif; 
    font-size: 20px; 
    font-weight: 400; 
    text-align: center; 
} 

a:link{text-decoration: none; color: #FFFFCC;} 
a:visited{text-decoration: none; color: #FFFFCC;} 
a:hover{text-decoration: none; color: white; font-weight: bold;} 

form { 
    margin: 0 auto; 
    max-width: 500px; 
    padding-bottom: 1em; 
    text-align: left; 
} 

h1 {  
    font-size: 72px; 

} 

h2 { 
    font-weight: 600; 
} 

h3 { 
    font-size: 64px; 
} 

.imgLink { 
    border-radius: 5px; 
    margin: 1%; 
    max-width: 50%; 
} 

.innerSection { 
    height: 100%; 
    overflow-y: scroll; 
    width: 110%; 
} 

.section { 
    background-color: rgba(51,51,51,0.5); 
    border-radius: 5px; 
    display: inline-block; 
    margin: 1%; 
    max-height: 42%; /*simplifies responsive height lower down*/ 
    min-height: 42%; 
    overflow: hidden; 
    padding: 1%;  
    vertical-align: top; /*otherwise sections move down when content added*/ 
    width: 28%; 
} 

#desktopTitle { 
    background-color: #330033; 
} 

#tabletTitle { 
    display: none; 
} 

@media screen and (max-width: 1020px), screen and (max-height: 925px) { 
    .section { 
     display: block; 
     max-height: fit-content; 
     min-height: 25%; 
     width: 94%; 
    } 

    #contact { 
     margin-top: 5%; 
    } 

    #desktopTitle { 
     display: none; 
    } 

    #resources { 
     display: none; 
    } 

    #tabletTitle { 
     display: block; 
    } 

    #twitter { 
     display: none; 
    } 
} 

@media screen and (max-width: 600px) { 
    #tabletTitle { 
     font-size: 48px; 
    } 
} 

Answer 1

bu deneyin (modifikasyonlar yorumlanmıştır):

.innerSection { 
    height: 100%; 
    overflow-y: auto; /*instead of scroll*/ 
    width: 110%; 
    padding: 20px; /*add padding here*/ 
} 

.section { 
    background-color: rgba(51,51,51,0.5); 
    border-radius: 5px; 
    display: inline-block; 
    margin: 1%; 
    height: 100%; /*It does not seem to work without specifying a height.*/ 
    max-height: 42%; 
    min-height: 42%; 
    overflow: hidden; 
    padding: 1%;  
    vertical-align: top; 
    width: 28%; 
}