tyl-er tyl-er - 3 months ago 11
HTML Question

Having trouble hiding overflow for list nested inside a div.

I have an un-ordered list that is nested inside the purple div. I only want the portion in (or on top of) the div to be visible, and I want to be able to scroll to view the rest. I've already done this on an earlier project.

http://codepen.io/tyl-er/pen/ALAyjq (Enter a search to see an example)

I tried using "overflow:hidden;" but that is not working.

<!--<span class="glyphicons glyphicons-wifi-alt"></span>
live icon

<span class="glyphicons glyphicons-moon"></span>
not live icon-->

<body>
<div class="box">
<header>
<div class="nav">
<ul>
<li class="favs"><a href="#fav">Favs</a></li>
<li class="online"><a href="#on">Online</a></li>
<li class="offline"><a href="#off">Offline</a></li>
</ul>
</div>
</header>
<div class="list">
<ul>
<li>streamerhouse</li>
<li>freecodecamp</li>
<li>OgamingSC2</li>
<li>brunofin</li>
<li>cretetion</li>
<li>ESL_SC2</li>
<li>storbeck</li>
<li>comster404</li>
<li>habathcx</li>
<li>RobotCaleb</li>
<li>noobs2ninjas</li>
</ul>
</div>
<div class="output"></div>
</div>
<div class="divN"></div>
</body>

/*Colors
#6441A4 (navbar, footer, highlight)
#392E5C
#17141F(background)*/
* {
color: white
}

body {
height: 100%;
width: 100%;
background: #17141f;
}

.box {
height: 80%;
width: 360px;
background: #392E5C;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

.nav ul {
width: 360px;
margin: 0;
padding: 0;
background: #6441A4;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
text-align: center;
}

.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .5s background-color;
}

.nav a:hover {
background-color: #005f5f;
}

.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}

@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}

/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}

a {
color: white;
}
a:hover {
color: white;
}

.list ul {
padding: 8px;
overflow: hidden;
overflow-y: scroll;
position: relative;
background:
}

.list li {
width: 360px;
height: 50px;

}


Here's the project url
http://codepen.io/tyl-er/pen/NRPkaV?editors=1100

Answer

just change your code to this and you are done

.list {
    overflow-y: auto;
    height: calc(100% - 50px);
}
.list ul {
    padding: 8px;
    overflow: hidden;
    position: relative;
    background:
}