How to get rid of gap between textarea's bottom and its wrapping div in chrome browser?

Question

I am trying to create a box like description field in https://gist.github.com/ page. Here is my minimal example. As you can see (in only chrome) there is a gap at the bottom of textarea between the wrapping div. How can I get rid of it?

<div style="
    padding: 3px;
    background-color: #eee;
    border-radius: 3px;
    width: 200px;">

      <div style="border: 1px solid #ccc;">
         <textarea style="width: 194px; resize: vertical; border: 0px; height: 124px; margin: 0px;"></textarea>
      </div>
    </div>

There is a similar but an old question here and the answer is not helpful.

Answer 1

the trick was giving the textarea display: block; credits to yuxel

just a note: css reset(yahoo's one) doesn't change textarea's display.