My webpage includes a div element with initial styles and no content:
#chatwindow {
width: 500px;
height: 50px;
overflow-y: scroll;
margin: 5px auto;
background: white;
border: 1px solid black;
}
I have a Javascript function that dynamically adds new lines to this div:
function updateChat(response) {
$('#chatwindow').append('<p>' + response + '</p>');
$("#chatwindow").attr({ scrollTop: $("#chatwindow").attr("scrollHeight") });
}
The problem arises when the content within the div exceeds its size, the scrollbar doesn't appear. How can I ensure that the scrollbar is displayed when needed using CSS only?