Scrollbar is not showing in textarea for height:30px

I am helping my friend today. He came across an issue that he wants a textarea to display in a height of 30px with scrollbar. Unfortunately if we give a height to the textarea the scrollbar is not shown but its working when we use the mouse scroller/keyboard up and down navigation keys.

Css

<style type="text/css">
.txtarea 开发者_StackOverflow社区{ height:50px; overflow-y:scroll;  }
</style>

Html

<textarea class="txtarea"></textarea>

Please help.

.txtarea {
    overflow-y: visible
}

Also, The text area has to be at least ~70px high otherwise the box is too small to show the scrollbar.

http://jsfiddle.net/gTzPM/

<a class="submit" href="https://www.google.com/"target="_blank">
  <input type="button" value="Submit"  target="_blank" onclick="preventProp(event)"></a>
</body>
<script>
function preventProp(e){
  if(confirm("Are you sure you want to Submit ?")){
    return true;
  }
  else{
    e.preventDefault();
  }
}
</script>