How to fit textarea exactly inside a div - CSS

Question

I have a <div> with fixed width and height (may be in px / %). I have a <textarea> inside that, having a width of 100%, like;

HTML

<div>     <textarea></textarea> </div> 

CSS

div{     height: 200px;     width: 300px;     background: red; } textarea{     height: 100px;     width: 100%; } 

But the </textarea> is stretching out of the container, like;

I want the textarea to stretch to 100% with of the container. How can I achieve this?

Here is the working fiddle.

Answer 1

Add box-sizing:border-box to the textarea's CSS.

Answer 2

You can use box-sizing. But each browser is different, so this example works for all class A browsers.

textarea{     height: 100%;     width: 100%;    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */     -moz-box-sizing: border-box;    /* Firefox, other Gecko */     box-sizing: border-box;         /* Opera/IE 8+ */ } 

http://jsfiddle.net/BwVQZ/7/