How to set up a scroll wheel when loading data via ajax?

Question

css

There is a block container for chat:
<div id="message_block"></div>

#message_block{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y:scroll;
}

in which messages are loaded as they are added via ajax. Here is a function that outputs messages to this block:

function (result)
                 {
          	if(result){
          		var html_data='<p>';
            	$.each(result,function(index,value){
            		html_data+=value.message+'</p><p>';
            	});
            	html_data+='</p>';
            	$('#message_block').html(html_data).css('overflow-y','scroll');
          	}

Despite the property being set overflow-y:scrollfor the main block, the message scroll wheel does not appear. There is a strip, but there is no wheel in it. And older messages are not visible or scrollable. How to fix?

Answer 1

Mmm... overflow-y: auto?
Yes, by the way, in combination with justify-content: flex-end;it crookedly works.