Textarea very strange behavior

Please, have a look at http://jsfiddle.net/g995s/.

<div id="textarea_wrapper">
  <textarea>How and where my width is derived from?</textarea>
</div>
#textarea_wrapper{
  height: 250px;
  border:thick solid green;
}
textarea{
  background-color: #930;
  border:none;
  margin:0;
  width:auto;
  resize:none;
  overflow:hidden;
  height:95%;
  padding-top:5%;
}

It is impossible to me to explain two things: The first one is why textarea goes outside its parent since height+padding-top=100%? The second one is how and from where this certain width of textarea is derived?


solution

In regards to the first issue, the percentage based padding-top value is relative to the width, not the height, therefore the positioning won’t be consistent if the width of the browser is changed - try resizing the window to see this.

8 Box model - 8.4 Padding properties

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for ‘margin-top’ and ‘margin-bottom’ as well. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.