オーバーフローで2つのdivを使用する：hidden、overflow-y：スクロールが期待どおりに動作しない

Question

2つのネストされた要素のトリックを使用してスクロールバーを表示せずにコンテンツをスクロールしようとしています。

私が何を意味するか説明するために：

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

をコンテンツには、外側のdivよりも高くなっているので、私はそれがスクロールしたいです。しかし、私は目に見えるスクロールバーが欲しくない。だから私は次のCSSを設定しました：

.outer { 
overflow: hidden; 
} 

.inner { 
overflow-y: scroll; 
width: 110%; 
} 

しかし、これはかなり奇妙に動作しています。それはある範囲で動作します。コンテンツはわずかにスクロールします。しかし、それは目に見える必要がある限りスクロールせず、内側divは外側divのpaddingを無視するようです。

これは私の完全なCSSです。関連ビットは、この（修正がコメントされている）試し.SECTIONと.innerSection

/* 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

ある：100％内側のdivの高さが必要

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