使用两个带有overlow:hidden然后overlow-y:scroll的div无法按预期工作

Question

我正在尝试使用两个嵌套元素的技巧，使内容滚动而不显示滚动条。

为了说明我的意思：

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

内容高于外部div，所以我希望它滚动。但是我不想要一个可见的滚动条。所以我设置了以下CSS：

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

然而，这表现得很奇怪。它在一定程度上起作用——内容略有滚动。然而，它并没有滚动到需要的可见位置，内部div似乎忽略了外部div上的填充

这是我的完整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

试试这个（修改有注释）：

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