Absolute Div with P content inside relative Div not overflowing - css

Question

So, I'm trying to make a chatbox, with the following:
<div class="text-container">
<div class="text" id="textholder">
<p>message</p>
...
<p>message</p>
</div>
</div>
<div class="chatbox-container">
<div class="chatbox">
<input type="text" id="textinput" class="inputText" placeholder="Enter text" />
<input type="submit" class="send" onclick="addMessage()" value="Send" autofocus />
</div>
</div>
With the following css:
.text-container{
width: 100%;
height: 500px;
overflow: auto;
position: relative;
}
.text{
position: absolute;
bottom: 0px;
left: 25%;
width: 50%;
height: auto;
}
.chatbox-container{
width: 100%;
height: 30px;
overflow: auto;
}
Where I add some more p's to with the addMessage() function (just adds paragraph with text to innnerHTML of #textholder)
now the problem is that I can't get the text div to overflow(auto), which means the text just disappears.
I want the text to be in the center of the text-container, but I want the scroll to be on the container, so it looks like in skype.
How can I do this? Also, I've tried to basicly align the messages to the bottom of the textbox in a skypelike manner, but I've read that this can also be done by vertical-aligning. yet this didn't work how I wanted it.
Hopefully you get what I'm asking, English is not my native language, and I'm not sure if I'm asking it in the right way.
thanks in advance!
ps. please take into account that this is part of a bigger page, thus I left out some parts.

Answer 1

Ammend your text class to :
.text{
position: absolute;
bottom: 0px;
height: 500px; //fix the height
width :90%;
overflow: auto; //scroll the content
}
Fiddle : http://jsfiddle.net/logintomyk/pETfX/
You have made the container overflow, while the messages are in text, so you need to overflow that class mate!! :)

Answer 2

Probably this is what you are looking for
.text-container {
height:200px;
overflow: auto;
border:1px solid #ccc;
}
.chatbox-container {
height: 30px;
}
jsfiddle