html - Vertical scrolling nav inside a variable height container -

i have setup codepen looks navigation looks like.

<nav role='navigation'>   <div class="user">     <img src="http://placehold.it/600x600">   </div>   <div class="links-wrap">       <ul class="links">       <li><a href="#">home</a></li>       <li><a href="#">about</a></li>       <li><a href="#">clients</a></li>       <li><a href="#">contact us</a></li>       <li><a href="#">contact us</a></li>       <li><a href="#">contact us</a></li>       <li><a href="#">contact us</a></li>       <li><a href="#">contact us</a></li>       <li><a href="#">clients</a></li>       <li><a href="#">clients</a></li>     </ul>   </div> </nav>  body {   height: 100%;   width: 100%;   margin: 0; } nav {   background-color: tomato;   width: 300px;   height: 100%;   position: fixed;     .user {       img {       width: 100%;       }       }   .links-wrap {     height: 100%;     overflow: scroll;   }   ul.links {         list-style: none;         margin: 0;         padding: 0;         li {             height: 60px;             {                 display: block;                 line-height: 60px;                 vertical-align: middle;                 padding-left: 40px;                 box-sizing: border-box;                 transition: .3s ease;         color: white;         text-decoration: none;         fotn-family: sans-serif;                 &:hover:not(.current) {           background-color: white;                     padding-left: 45px;           color: tomato;                 }             }         }     } } 

http://codepen.io/anon/pen/bdoobw

i need navigation items scroll can access items in list.

the image potentially smaller because responsive @ point.

i might have fixed it. check here.

what did equally share height .user , .links-wrap divs. gave each 50%, although can change proportion best. also, set image inside .user div have height: 100% doesn't overflow other div.