How to expand textarea width to 100% of parent (or how to expand any HTML element to 100% of parent width)?

Question

How to expand textarea width to 100% of parent?

I try width 100% but it is not works it expands to 100% of page what crash layout.

Here the question in visual way.

Please provide some hints.

Answer 1

<div>    <div style="width: 20%; float: left;">      <p>Some Contentsssssssssss</p>    </div>    <div style="float: left; width: 80%;">      <textarea style="width: 100%; max-width: 100%;"></textarea>    </div>    <div style="clear: both;"></div>  </div>     

Answer 2

The box model is something every web-developer should know about. working with percents for sizes and pixels for padding/margin just doesn't work. There always is a resolution at which it doesn't look good (e.g. giving a width of 90% and a padding/margin of 10px in a div with a width of under 100px).

Check this out (using micro.pravi's code): http://jsbin.com/umeduh/2

<div id="container">     <div class="left">         <div class="content">             left         </div>     </div>     <div class="right">         <div class="content">             right             <textarea>Check me out!</textarea>         </div>     </div> </div> 

The <div class="content"> are there so you can use padding and margin without screwing up the floats.

this is the most important part of the CSS:

textarea {     display: block;     width: 100%;     -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;             box-sizing: border-box; }