title: css - max-height: 100% doesn't work on textarea
body: <p>I have a <code>div</code>, which consists of a header, textarea and a footer. The header and footer are as big as their content and the textarea takes up the remaining space. The textarea has a <code>max-height</code> of 100% , because the height of the textarea should not be more than 100%. However, if you resize the textarea, the textarea gets higher than 100% of the parent. How to prevent this?</p>
  
  <p>Code: <a href="http://jsfiddle.net/FC7eY/1650/" rel="nofollow noreferrer">http://jsfiddle.net/FC7eY/1650/</a></p>
  
  <p>Summary:</p>
  
  <ul>
  <li>The sum of the heights of all the elements must be 100%</li>
  <li>The height of the <code>textarea-wrapper</code> div should be <code>totalHeight(100%) - headerHeight - footerHeight</code></li>
  <li>The header and footer must not have a fixed height, they should be as big as their content.</li>
  <li>The height of the parent/wrapper div must be 80% and the width must be 350px</li>
  </ul>