Html 设置高度时滚动条行为异常

我正在尝试创建一个聊天小部件，它看起来像这样：

我想做的是，为整个聊天指定一个最大高度，然后让所有内容都填写，而不需要在聊天本身中指定任何固定高度。我的代码如下：

HTML 我想要的是消息

填充除标题和表单之外的框，即使没有大量消息。当它填满时，我只希望聊天滚动，同时将标题和表单“附加”到顶部和底部，以便它们始终可见。我“某种程度上”能够做到这一点，但是我必须在

boxlr聊天信息上指定
height:150px
，我不想这样做。另外，当滚动时，它会到达底部的一个点，在那里你不能再滚动了，但是滚动条只有80%


最好的解决方法是什么

滚动条
聊天室布局
很抱歉这个糟糕的标题，我找不到更好的名字了。我有一个JSFiddle，如果它有用的话。
您可以通过更改
溢出：滚动到
溢出：自动

至于聊天窗口的高度。。。为什么不将
.boxlr聊天信息的高度设置为所需的任意高度？因为它有一个固定的高度和溢出：自动，它不会影响页眉和页脚。
我没有注意到小提琴中的滚动条有问题。它可能是你的浏览器。另外，为什么不简单地在.boxlr聊天信息上设置最大高度？如果不是那么简单，我很抱歉，但我可能不理解这个问题。你使用的是什么浏览器？
<section class="boxlr-chat">
    <div class="boxlr-chat-header">
        {{ Title }}
        <span>{{ Subtitle }}</span>
    </div>
    <ul class="boxlr-chat-messages">
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
    </ul>
    <form action="#" class="boxlr-chat-form">
        <input type="text" />
        <button type="submit">Send</button>
    </form>
</section>

.boxlr-chat {
    width: 100%;
    max-height: 200px;

    background-color: #1abc9c;
}

.boxlr-chat-header {
    background-color: #2ecc71;
}

.boxlr-chat-messages {
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 150px;
    overflow: scroll;

    background-color: #3498db;
}

.boxlr-chat-form {
    width: 100%;

    background-color: #34495e;
}