As stated in the comment above, you need to use the <ul> tag as a parent for the <li> tags.
#chatbox already has a overflow: auto rule as well as a 50% height. And to show you clearly, I created some <li> tags and set the height: 100vh for the <body> tag.
Is this what you wanted?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
.msgln {
margin: 0 0 2px 0;
padding: 0.5%;
border: 3px solid #eee;
}
#chatbox {
text-align: left;
margin: 0 auto;
margin-bottom: 25px;
background: #fff;
height: 50%;
width: 100%;
overflow: auto;
background-color: white;
}<ul id="chatbox" style="list-style: none;">
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
<li>
<div class="msgln" data-user="Example">(current date)<b>Example</b>: <br/>The quick brown fox jumped over the lazy dog.
</div>
</li>
</ul>