Try this.
Add a max-height to the div. This will make sure that the height of the div shouldn't go beyond the max-height. Then, add overflow: auto. This will make sure that when the height goes beyond the max-height, scrollbars should appear.
overflow: auto; works for both width and height. If you want to be specify, you can always go for overflow-y: auto;.
Also, I forgot to mention that max-height will not unnecessarily maintain a fixed height if the children are less.
#wordlist {
position: fixed;
overflow: auto;
margin: 0 auto;
max-height: 100px;
bottom: 50%;
left: 40%;
text-align: left;
}
.word {
// Just font and color
}
<body>
<div id="wordlist">
<div class="word">whatever</div>
<div class="word">whatever</div>
<div class="word">whatever</div>
<div class="word">whatever</div>
<div class="word">whatever</div>
<div class="word">whatever</div>
<div class="word">whatever</div>
<div class="word">whatever</div>
<div class="word" id="current">whatever</div>
</div>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
