Optionally fill an incomplete screen from the bottom

[bgribble]

Really liking react-chatview for my application, thanks!

I am doing a chat-type view with an input at the bottom and the react-chatview containing history of utterances above. I pin the containing <div> to fill the available space in the single-page app.

I would really like a newly-created chat thread to grow from the bottom upward, like a teletype session, so that history just starts scrolling off the top as more utterances are added. What it does instead is display the first message at the top of the screen, then grow downward as more chatting happens (newer messages on bottom, of course, since I specify flipped={true}) until scrolling kicks in and then it starts pushing history off the top of the screen.

A screenshot of a short chat thread that doesn't yet fill up a screen:

an option like fillFromBottom={true} would be awesome

[dustingetz]

Reproduced in both the fiddle and the messages demo:

in messages demo, in the js console, type cursor.refine('messages').set([])

[dustingetz]

Can this be resolved using css only? I got close:

(see element inline styles set in screenshot - { position:absolute; bottom: 55px }

I wasn't able to get a polished solution in the amount of time i spent. I am not sure how i would implement a fillfrombottom - i think the solution would need css and the reason react-chatview is good is because it just uses browser layout without forcing css on you