Como controlar o overflow de uma div com elementos dinâmicos?

ola pessoal, estou com um dificuldade que e a seguinte.

tenho esse código HTML:

<'button' onclick='somar()'>click '<'div 'class='messages' id='messages'> <'/div>'

e esse codigo javascript com jquery:

function click(){ $("#messages").append($('').text('texto qualquer')); }

e a seguinte CSS:

.messages{ max-height: 220px; overflow-y: auto; }

A ideia e a seguinte:
vou clicar no botão varias vezes e ele vai inserir uma tag span com um texto dentro, e quando eu chegar a altura de 220px a div deve ficar com barra de rolagem, porem como a tag e inserida dinamicamente na div com o .append, a div com class messages sempre vai ficar com height 0, e mesmo que a altura dos spans ultrapasse os 220px a div não vai aparecer barra de rolagem.

Tem como resolver isso?
edit: coloquei umas apas nas tag para elas aparecerem.