Я не могу прокрутить содержимое моего div идеально

Question

Я собирался сделать свой контент div с автопрокруткой, который должен был прокручиваться вниз, но каким-то образом он прокручивался как минимум на 1 строку перед последней строкой. этот div должен был быть похож на textarea, но я не хочу использовать textarea, потому что он не будет форматировать html.

я пытался сделать мое условие прокрутки равным минус один , а событие прокрутки было плюс один

У меня был такой javascript

var chatLog = document.getElementById('chatlog');
var logLength = chatLog.scrollHeight - chatLog.offsetHeight;

chatLog.innerHTML += msg;

if (chatLog.scrollTop < logLength - 1) {
    chatLog.scrollTop = logLength + 1;
}

и css вот так

.chatlog {
    width: 70%;
    height: 200px;
    word-wrap: break-word;
    flex-direction: column-reverse;
    background-color: #FFFFFF;
    padding: 10px;
    flex: 1;
    overflow: auto;
    font-size: 14px;
    margin: 20px auto;
    border-radius: 6px;
    border: 0;
}

Я ожидаю, что вывод будет последней строкой, но фактический выходной поток - одна строка перед последней строкой.