JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
    <div class="chat-holder">
        <div class="chat-text">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
        </div>             
    </div>
</div>

CSS

html, body {
    height: 100%;
}
.page {
    background: #ff0;    
    width: 100%;
    height: 100%;
}
.chat-holder {
    background: #fff;
    width: 200px;
    max-height: calc(100% - 41px);
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid red;
    overflow: auto;
}
.chat-text {
    background: #fff;
    width: 100%;
    max-height: 100%;
    border: 1px solid #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}