Can it flexbox? Chat window with input at the bottom, chats scrolling up

Seems like it should be possible with flexbox, but I can't figure it out.

http://codepen.io/MichaelJCole/pen/NGBVGe

Goals:

1. textarea (for typeing in messages) stays at the bottom the whole time.
2. chats start at the bottom, then scroll up as needed.
3. If you use the "Google Hangouts", like the message app in that.

Here's the markup:

<div id="chatBar"><div id="chatList"><div class="chat mine">hello world</div><div class="chat theirs">hello moon</div></div><input id="chatBarInput" class="form-control" type="textarea"></div>

And here's the CSS:

html, body { height: 100%; }#chatBar {  height: 100%;  display: flex;  flex-flow: column nowrap;  justify-content: flex-end;  overflow: none;}#chatList {  flex: 0 1 auto;  display: flex;  flex-flow: column nowrap;  justify-content: flex-end;  overflow-y: scroll;}#chatBarInput {  flex: 1 0 auto;}.chat {  flex: none;  align-self: flex-start;  background-color: lightgreen;}.chat.mine {  align-self: flex-end;  background-color: pink;}

I can't get #chatBar to "squeeze"#chatList without setting a height. Which is what I was trying to avoid by using flexbox :-/

Sorry, I'm a backend coder. Tried a bunch of stuff, then pared it down for the CodePen.

Seems like I should be able to tell the inner flexbox to scroll, while leaving the outer alone. Do I have to use position:absolute?