Вертикальная полоса прокрутки не работает

Question

Это мой HTML-код:

<div id="section"> 

    <div class="row container-fluid" style="overflow: hidden;"> 
     <div class="col-md-2" style="background-color: red; top: 0; height: auto; overflow-y: auto; "> 
      <ul> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
       <li>a</li><li>a</li><li>a</li><li>a</li> 
      </ul> 
     </div> 
     <div class="col-md-10" style="background-color: green; top: 0; height: 400px; "></div> 
    </div> 
</div> 

Это мой CSS код:

* { 
    margin: 0; 
    padding: 0; 
} 

html{ 
    height: 100%; 
    overflow: hidden; 
} 
body { 
background-color: #F7F9F9 !important; 

} 

.navbar{ 
    background-color: #FDFEFE !important; 
    padding: 0; 
    margin: 0 !important; 
} 

.navbar-header{ 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

#section .row{ 
    margin: 0 !important; 
    padding: 0 !important; 
    display: block; 
} 

.col-md-2{ 
    overflow-y: auto; 
} 

::-webkit-scrollbar { 
    -webkit-appearance:none; 
    width:12px; 
    _background-color:#f0f0f0; 
} 

::-webkit-scrollbar-thumb { 
    border-radius:12px; 
    border:4px solid rgba(255,255,255,0); 
    background-clip:content-box; 
    _background-color:#bfbfbf; 
    background-color: #A0A0A0; 
} 
::-webkit-scrollbar-thumb:hover { 
    border-radius:12px; 
    border:4px solid rgba(255,255,255,0); 
    background-clip:content-box; 
    background-color:#A0A0A0;} 

::-webkit-scrollbar-corner { 
    background-color:#e6e6e6;} 

Я хотел, чтобы получить тонкую вертикальную полосу прокрутки. Кажется, все делают то же самое, но это не работает для меня. FYI Я скопировал это с разных других сайтов, чтобы в некоторых местах я ошибался. Надеюсь, кто-то поможет мне.

Answer 1

overflow: hidden останавливает что-либо за пределами области просмотра. Поэтому вы не можете прокручиваться ниже 100%, потому что не ниже 100%.

html{ 
    height: 100%; 
    overflow: hidden; /* Remove this */ 
}