title: Getting HTML textarea controls to expand to width of container
body: <p>I want my textarea controls to follow standard block display layout behavior, so that they expand to the width of the containing parent. Simply setting <code>display:block;</code> won't do this- they default to some default with value. Setting <code>width:100%;</code> doesn't work because any padding in the controls means they spill over the container bounds. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div &gt;test&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='container'&gt;
      &lt;textarea &gt;test&lt;/textarea&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container {
      width:300px;
      border:black solid 1px;
      margin:10px;
  }
  .container &gt; div {
      display:block;
      padding:10px;
      background:red;
  }
  .container &gt; textarea {
      display:block;
      padding:10px;
      background:red;
  }
  </code></pre>
  
  <p>​
  <strong>RESULT:</strong>  </p>
  
  <p><img src="https://i.stack.imgur.com/S3c3B.png" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/hKcjc/" rel="noreferrer">http://jsfiddle.net/hKcjc/</a></p>