scrollTop value changes immediately after setting

I have some simple markup…

...
...
</div>

Styled as a vertical flexbox...

.container {
    margin: 1em 1em 0;
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
}

.conversation {
    overflow-y: scroll;
    box-sizing: border-box;
    margin-bottom: auto;
    flex: 1 1 80%;
}

.keyboard {
    padding: 2rem;
    box-sizing: border-box;
}

And I simply want to move the scroll position of .conversation all the way to the bottom:

var scrollConvo = function() {
    var convo = document.getElementById('conversation');
    console.log('scrollTop', convo.scrollTop); // scrollTop 174
    console.log('scrollHeight', convo.scrollHeight); // scrollHeight 426
    convo.scrollTop = convo.scrollHeight;
    console.log('scrollTop', convo.scrollTop); // scrollTop 252
}

But this doesn't work as expected. The scroll position moves, but not all the way to the bottom. And as you see in the comments next to the console.log statements, the value is not getting set to what I'm expecting. I have no explanation for the resulting value. Why isn't scrollTop 426?


Source: stackoverflow-javascript