I'm having a problem with a textarea element which im trying to get to an A4 size. the dimensions are set in a surrounding DIV element (297mm,210mm) and the textarea inherits the dimensions correctly since it is nested. However even when i try overflow:hidden, or overflow-y:hidden in the textarea, it still allows more characters to be inputted, and a scroll bar appears. i want to limit the text to JUST the A4 size, no overflowing.
What am i doing wrong?
Here's the code:

<div style='height:297mm; width:210mm; overflow:hidden;'>
<textarea name='content' style='overflow-y:hidden; margin-left:10px; height:100%; width:100%;'></textarea>
</div>

Thank you for your help